javascript操作select

发表于: sitebuild | 作者: darkmi | 日期: 2009/06/24 08:00
字号:

总结了一些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选择框:

<select name="city" id="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</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);
 }

切换主题切换主题
返回顶部