JS中select下拉列表选中的值

select 元素可创建单选或多选菜单，能够占据很小的区域，却包含很多的内容，在政府网站中使用率很高，今天就简单谈谈select这个元素。

1.基本属性
通常来说，我们用select元素来创建下拉列表，用option元素来定义列表中待选择的选项。一般来说，下来列表的第一个待选项为默认选项。

默认选中的方法，只需要在option元素添加 "selected = 'selected' " 即可：

<select>
      <option>值1</option>
      <option selected = 'selected'>值2</option>
      <option>值3</option>
</select>

2.动态创建select

var select = document.createElement('select');
select.id = 'mySel';
body.appendChild(select);

3.动态创建option

var mySel = document.getElementById('mySel');
mySel.add(new Option(text，value));

add() 方法用于向 <select> 添加一个 <option> 元素，add(option,before)。

参数	描述
option	要添加选项元素。必需是 option 或 optgroup元素
before	在选项数组的该元素之前增加新的元素。如果该参数是null，元素添加到选项数组的末尾。

4.删除option

//全部删除option
mySel.options.length = 0;
//删除指定索引的option
mySel.options.remove(i);    //i为任意索引值

5.获取选中的选项

 //当前选中的选项的索引
var index = mySel.selectedIndex;  
//获取选中的文本
mySel.options[index].text;   
//获取选中选项的value值
mySel.options[index].value;

好了，读者可根据select的操作方法，可以尝试做省级联动。

最后编辑于：2017.12.10 02:05:15