总结了一些javascript操纵select表单控件的方法。

//添加选项

function addOption(){
var option = document.createElement(“OPTION”);
var select = document.getElementById(“selectId”);
option.text = “optionText”;
option.value = “1”;
select.add(option);
}

说明：
默认添加到选择框的最下端。

//向指定位置添加选项

function insertOption(){
var select = document.getElementById(“selectId”);
var option = document.createElement(“OPTION”);
option.text = “bbb”;
option.value = “2”;
select.add(option, 1);
}

说明：
注意select.add(option, 1);方法的最后一个参数即可，该参数指定了option的位置。

//遍历选项

function removeOption(){
var selectId = document.getElementById(“selectId”);
for(var i = 0; i < selectId.length; i++){ if(selectId.options[i].selected==true){ selectId.options.remove(i); alert("选中项的值为：" + selectId.options[i].value); alert("选中项的文本为：" + selectId.options[i].text); } } }

//删除选项

function removeOption(){
var selectId = document.getElementById(“selectId”);
for(var i = 0; i < selectId.length; i++){ if(selectId.options[i].selected==true){ selectId.options.remove(i); } } }

//获得选中选项的索引值

function getIndex(){
var select = document.getElementById(“selectId”);
alert(select.selectedIndex);
}

说明：
选择框的selectedIndex属性比循环遍历option数组获得选中选项的方法方便多了。

~~~~~~~~~~~~~~~~~~~~~~~

操作选择框时，getElementById与getElementsByName的区别如下：

getElementById得到的是select对象；
getElementsByName得到的是个二维数组；

假设页面有如下select选择框：

北京上海深圳

通过getElementById来对其选项进行的遍历方法如下：

var selectById = document.getElementById(“city”);
//遍历city
for(var i = 0; i < selectById.length; i++){ alert("text ==" + selectById.options[i].text + ", value == " + selectById.options[i].value); }

通过getElementsByName来对其选项进行遍历的方法如下：

var selectByName = document.getElementsByName(“city”);
for(var i = 0; i < selectByName[0].length; i++){ alert("text == " + selectByName[0][i].text + ", value == " + selectByName[0][i].value); }