HTML中select标签单选多选详解

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。

一、基本用法：

<select>

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

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

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

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

</select>

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

<SELECT NAME="studyCenter" id="studyCenter"  SIZE="1">

<OPTION VALUE="0">全部

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

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

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

</SELECT>

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

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

<select name= “education” id=”education” multiple=”multiple”>

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

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

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

</select>



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

<select name= “education” id=”education” >

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

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

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

</select>

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

<select name="education" id="education" size='3'>

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

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

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

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

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

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

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

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

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

         <option selected>请选择</option>

</select>

三、 多选Select组件涉及的所有常用操作：

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

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

@param objItemValue
将要验证是否存在的值

function isSelectItemExit(objSelectId,objItemValue)  { 


 var objSelect = document.getElementById(objSelectId);

    var isExit = false; 

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

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

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

             isExit = true; 

             break; 

         } 

     } 

    }

    return isExit;

 }

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

@param  objSelectId 将要加入item的目标select组件的id

@param objItemText 将要加入的item显示的内容

@param objItemValue 将要加入的item的值

function addOneItemToSelect(objSelectId,objItemText,objItemValue) { 


 var objSelect = document.getElementById(objSelectId);

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

      //判断是否该值的item已经在select中存在


     if(isSelectItemExit(objSelectId,objItemValue)) { 

         $.messager.alert('提示消息','该值的选项已经存在!','info');

     }  else  {

         var varItem = new Option(objItemText,objItemValue); 

         objSelect.options.add(varItem); 

     } 

    }

}

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

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

function removeSelectItemsFromSelect(objSelectId) { 


 var objSelect = document.getElementById(objSelectId);

 var delNum = 0;

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

        for(var i=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  


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

  @param objItemValue 将要验证是否存在的值

function removeItemFromSelectByItemValue(objSelectId,objItemValue) { 


 var objSelect = document.getElementById(objSelectId);

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

      //判断是否存在

       if(isSelectItemExit(objSelect,objItemValue)) { 

         for(var i=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中的所有选项

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

function clearSelect(objSelectId) { 

 var objSelect = document.getElementById(objSelectId);

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

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

          objSelect.options.remove(i); 

        }        

     }

}

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

 @param objSelectId 目标select组件id

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

function getAllItemValuesByString(objSelectId) {

 var selectItemsValuesStr = "";

 var objSelect = document.getElementById(objSelectId);

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

      var length = objSelect.options.length

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

         if (0 == i) {

            selectItemsValuesStr = objSelect.options[i].value;

         } else {

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

         }

        }  

     } 

     return selectItemsValuesStr;

}

7.
将一个select中的所有选中的选项移到另一个select中去

  @param fromObjSelectId  移动item的原select组件id

  @param toObjectSelectId  移动item将要进入的目标select组件id

 function moveAllSelectedToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 


 var objSelect = document.getElementById(fromObjSelectId);

 var delNum = 0;

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

        for(var i=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中去

 @param fromObjSelectId 
移动item的原select组件id

 @param toObjectSelectId  移动item将要进入的目标select组件id

 function moveAllToAnotherSelectObject(fromObjSelectId, toObjectSelectId) { 

 var objSelect = document.getElementById(fromObjSelectId);

     if (null != objSelect) {

      for(var i=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;

        }  

     }

}