<转>select 操作

百度上<转>
Javascript 操作select是表单中常见的一种，我们可以对select进行删除、添加、增加、插入、替换等操作。下面我们对id=sel的select菜单操作
<select name="" id="sel">
<option value="0">列表一</option>
<option value="1">列表二</option>
<option value="2">列表三</option>
<option value="3">列表四</option>
</select>
<script>

1、动态删除select中的所有option：
function deleteAll(){
var selObj=document.getElementById("sel");
selObj.length=0;
}
代码运行后select中没有option元素。
2、动态删除select中的某一项option:
function deleteOption(){
var selObj=document.getElementById("sel");
selObj.remove(3);
}
remove(index);
select的所有option从0开始索引为index的options值被删除
如上列代码运行后select中索引为3的option值被删除即第四个<option value="3">列表四</option>没有了，注意了，3并非是option的value值，而是options数组的索引值。
这里可能大家都习惯写成
selObj.options.remove(3);
但这样对火狐不兼容，主要原应是火狐不认为remove()是对options的操作吧。
建议大家还是写成对dom的操作比较好。
3、动态添加select中的项option:
function addOption(){
var selObj=document.getElementById("sel");
selObj.options.add(new Option("列表五","4"));
}
add(new Option(text,value))
以上代码运行后，select最后一行添加了值为"4"，文本为"列表五"的option即<option value="4">列表五</option>
如果我们想在select中某一行插入option可写成
function addOption(){
var selObj=document.getElementById("sel");
selObj.options.add(new Option("列表五","4"),3);
}
在select中索引为3的option即第1+3=4个option前插入<option value="4">列表五</option>则新插入的option索引为3,其后索引加1；代码运行后：
<select id="sel" name="">
<option value="0">列表一</option>
<option value="1">列表二</option>
<option value="2">列表三</option>
<option value="4">列表五</option>
<option value="3">列表四</option>
</select>
4、对select取值
function getValue(){
var selObj=document.getElementById("sel");
var text=selObj.options[selObj.selectedIndex].text;//返回下拉列表中被选选项的文本
var val=selObj.options[selObj.selectedIndex].value;//返回下拉列表中被选选项的值
alert(text+","+val);
}
如上列代码如果我们选中文本值为“列表四”的菜单，则弹出“列表四，3”。

5、替换select的option值
function changeOption(){
var nowOption;
var selObj=document.getElementById("sel");
for(i=1;i<selObj.length;i++){
if(selObj.options[i].selected){ //当某个option被选中 
nowOption=selObj.options[i];
selObj.options.add(new Option(nowOption.text,nowOption.value),i-1);//在被选中的上一个option前插入刚选中的option值
selObj.remove(i+1);//删除开始选中的option，因为之前插入了一个option所以i+1
}
}
}上列为将选中的option和上一个option互换的代码。