select控件的相关操作

 

往往简单的事情，牵扯到多浏览器就不再简单，总结下javascript对select的常见操作

 

<select id="city"></select>

 

var citySelect = document.getElementById("city");

 

动态添加option：

 

1. citySelect.options.add(new Option("北京","010"));//IE FF Opera Safari Chrome浏览器都支持

 

2. citySelect.add(new Option("北京","010"));  //Firefox不支持

 

3. citySelect.innerHTML = '<option value="010">北京</option><option value="0356">太原</option>' //IE不支持

 

4. $("#city").append('<option value="010">北京</option><option value="0356">太原</option>');

 

5. var opt = document.createElement("option");  

 

    opt.value="010";  

 

    opt.text = "北京";  //ie不支持

 

    citySelect .appendChild(opt); 

 

6. var opt = document.createElement("option");  

 

    opt.value = "010";  

 

    var oText = document.createTextNode("北京");  

 

    opt.appendChild(oText);  

 

citySelect.appendChild(opt);  

 

获取select选中值：

 

1. citySelect.vale

 

2. $("#city").val()

 

设置选中项：

 

1. function selectOne(obj,value){

       var options = obj.getElementsByTagName("option");

 

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

 

           if(options[i].value==value)

 

              options[i].selected = true;

       }

 

   }

 

2. $("#city").attr("value","0356")  //jQuery方式

 

删除某个option：

 

1.  $("#city")[0].options.remove(0);  //ff不支持

 

2.  $("#city")[0].remove(0);   //ff chrome ie opera safari下可用

 

3.  $("#city").find("option[value=0356]").remove();   //jQuery

 

4.  $("#city").find("option[index=0]").remove();  //jQuery

 

删除所有option：

 

1.  $("#city")[0].options.length = 1; 

 

总结：Firefox中add和remove方法所属的对象正好相反，select.options支持add不支持remove，select支持remove不支持add。

 

参考：http://blog.csdn.net/wangjj_016/archive/2008/07/03/2608913.aspx