selectitem(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>

　　三、多選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;

　　}

　　7.將一個select中的所有選中的選項移到另一個select中去

　　@paramfromObjSelectId移動item的原select組件id

　　@paramtoObjectSelectId移動item將要進入的目標select組件id

　　functionmoveAllSelectedToAnotherSelectObject(fromObjSelectId,toObjectSelectId){

　　varobjSelect=document.getElementById(fromObjSelectId);

　　vardelNum=0;

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

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

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

　　addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)

　　objSelect.options.remove(i);

　　i=i-1;

　　}

　　}

　　}

　　}

　　8.將一個select中的所有選項移到另一個select中去

　　@paramfromObjSelectId移動item的原select組件id

　　@paramtoObjectSelectId移動item將要進入的目標select組件id

　　functionmoveAllToAnotherSelectObject(fromObjSelectId,toObjectSelectId){

　　varobjSelect=document.getElementById(fromObjSelectId);

　　if(null!=objSelect){

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

　　addOneItemToSelect(toObjectSelectId,objSelect.options[i].text,objSelect.options[i].value)

　　objSelect.options.remove(i);

　　i=i-1;

　　}

　　}

　　}