javascript操作select

总结了一些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); }

此条目发表在sitebuild分类目录,贴了, 标签。将固定链接加入收藏夹。

javascript操作select》有一条回应

  1. Pingback引用通告: 爱J2EE » Jquery入门三:表单对象操作

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据