在HTML里select标签有哪些用法

　　一、基本用法：

 

　　<select>

 

　　<optionvalue="volvo">Volvo</option>

 

　　<optionvalue="saab">Saab</option>

 

　　<optionvalue="opel">Opel</option>

 

　　<optionvalue="audi">Audi</option>

 

　　</select>

 

　　其中，</option>标签可以省掉，在页面中用法

 

　　<SELECTNAME="studyCenter"id="studyCenter"SIZE="1">

 

　　<OPTIONVALUE="0">全部

 

　　<OPTIONVALUE="1">湖北电大网络学习中心

 

　　<OPTIONVALUE="2">成都师范学院网络学习中心

 

　　<OPTIONVALUE="3">武汉职业技术学院网络学习中心

 

　　</SELECT>

 

　　二、Select元素还可以多选，看如下代码：

 

　　

 

　　//有multiple属性，则可以多选

 

　　<selectname=“education”id=”education”multiple=”multiple”>

 

　　<optionvalue=”1”>高中</option>

 

　　<optionvalue=”2”>大学</option>

 

　　<optionvalue=”3”>博士</option>

 

　　</select>

 

　　//下面没有multiple属性,只显示一条，不能多选

 

　　<selectname=“education”id=”education”>

 

　　<optionvalue=”1”>高中</option>

 

　　<optionvalue=”2”>大学</option>

 

　　<optionvalue=”3”>博士</option>

 

　　</select>

 

　　//下面是设置了size属性的情况,如果size=3那么就显示三条数据，注意不能多选的。

 

　　<selectname="education"id="education"size='3'>

 

　　<optionvalue="0">小学</option>

 

　　<optionvalue="1">初中</option>

 

　　<optionvalue="2">高中</option>

 

　　<optionvalue="3">中专</option>

 

　　<optionvalue="4">大专</option>

 

　　<optionvalue="5">本科</option>

 

　　<optionvalue="6">研究生</option>

 

　　<optionvalue="7">博士</option>

 

　　<optionvalue="8">博士后</option>

 

　　<optionselected>请选择</option>

 

　　</select>

 

　　1.判断select选项中是否存在指定值的Item

 

　　

 

　　@paramobjSelectId将要验证的目标select组件的id

 

　　@paramobjItemValue将要验证是否存在的值

 

　　functionisSelectItemExit(objSelectId,objItemValue){

 

　　varobjSelect=document.getElementById(objSelectId);

 

　　varisExit=false;

 

　　if(null!=objSelect&&typeof(objSelect)!="undefined"){

 

　　for(vari=0;i<objSelect.options.length;i++){

 

　　if(objSelect.options[i].value==objItemValue){

 

　　isExit=true;

 

　　break;

 

　　}

 

　　}

 

　　}

 

　　returnisExit;

 

　　}

 

　　2.向select选项中加入一个Item

 

　　@paramobjSelectId将要加入item的目标select组件的id@paramobjItemText将要加入的item显示的内容@paramobjItemValue将要加入的item的值functionaddOneItemToSelect(objSelectId,objItemText,objItemValue){varobjSelect=document.getElementById(objSelectId);if(null!=objSelect&&typeof(objSelect)!="undefined"){//判断是否该值的item已经在select中存在if(isSelectItemExit(objSelectId,objItemValue)){$.messager.alert('提示消息','该值的选项已经存在!','info');}else{varvarItem=newOption(objItemText,objItemValue);objSelect.options.add(varItem);}}}

 

　　3.从select选项中删除选中的项，支持多选多删

 

　　

 

　　@paramobjSelectId将要进行删除的目标select组件id

 

　　functionremoveSelectItemsFromSelect(objSelectId){

 

　　varobjSelect=document.getElementById(objSelectId);

 

　　vardelNum=0;

 

　　if(null!=objSelect&&typeof(objSelect)!="undefined"){

 

　　for(vari=0;i<objSelect.options.length;i=i+1){

 

　　if(objSelect.options[i].selected){

 

　　objSelect.options.remove(i);

 

　　delNum=delNum+1;

 

　　i=i-1;

 

　　}

 

　　}

 

　　if(delNum<=0){

 

　　$.messager.alert('提示消息','请选择你要删除的选项!','info');

 

　　}else{

 

　　$.messager.alert('提示消息','成功删除了'+delNum+'个选项!','info');

 

　　}

 

　　}

 

　　}

 

　　4.从select选项中按指定的值删除一个Item

 

　　

 

　　@paramobjSelectId将要验证的目标select组件的id

 

　　@paramobjItemValue将要验证是否存在的值

 

　　functionremoveItemFromSelectByItemValue(objSelectId,objItemValue){

 

　　varobjSelect=document.getElementById(objSelectId);

 

　　if(null!=objSelect&&typeof(objSelect)!="undefined"){

 

　　//判断是否存在

 

　　if(isSelectItemExit(objSelect,objItemValue)){

 

　　for(vari=0;i<objSelect.options.length;i++){

 

　　if(objSelect.options[i].value==objItemValue){

 

　　objSelect.options.remove(i);

 

　　break;

 

　　}

 

　　}

 

　　$.messager.alert('提示消息','成功删除!','info');

 

　　}else{

 

　　$.messager.alert('提示消息','不存在指定值的选项!','info');

 

　　}

 

　　}

 

　　}

 

　　5.清空select中的所有选项

 

　　@paramobjSelectId将要进行清空的目标select组件id

 

　　functionclearSelect(objSelectId){

 

　　varobjSelect=document.getElementById(objSelectId);

 

　　if(null!=objSelect&&typeof(objSelect)!="undefined"){

 

　　for(vari=0;i<objSelect.options.length;){

 

　　objSelect.options.remove(i);

 

　　}

 

　　}

 

　　}

 

　　6.获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开

 

　　

 

　　@paramobjSelectId目标select组件id

 

　　@returnselect中所有item的值，值与值之间用逗号隔开

 

　　functiongetAllItemValuesByString(objSelectId){

 

　　varselectItemsValuesStr="";

 

　　varobjSelect=document.getElementById(objSelectId);

 

　　if(null!=objSelect&&typeof(objSelect)!="undefined"){

 

　　varlength=objSelect.options.length

 

　　for(vari=0;i<length;i=i+1){

 

　　if(0==i){

 

　　selectItemsValuesStr=objSelect.options[i].value;

 

　　}else{

 

　　selectItemsValuesStr=selectItemsValuesStr+","+objSelect.options[i].value;

 

　　}

 

　　}

 

　　}

 

　　returnselectItemsValuesStr;

 

　　}





本文转载自中文网