美文网首页
JS中select下拉列表选中的值

JS中select下拉列表选中的值

作者: Bennt | 来源:发表于2017-09-01 17:01 被阅读0次

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的操作方法,可以尝试做省级联动。

相关文章

  • JS中select下拉列表选中的值

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

  • select

    select (下拉列表框 )默认样式如下: jquery的val()方法可以使select中相应的选项被选中。但...

  • element UI select 下拉选项 获取当前选中的值

    element UI select 下拉选项 获取当前选中的值

  • 01.22 下拉列表和多行文本域

    下拉列表(菜单) select标签 - 代表整个下拉列表 option标签 - 代表列表中的每个选项,select...

  • robot framework之element is not c

    这几天的自动化测试过程中遇到一些自定义的下拉框列表,这种下拉列表没有关键字select,所以想要选择下拉列表中的值...

  • select标签

    1.select 1)标签是下拉列表 2)格式 3)设置默认值 4)对下拉列表的内容进行分类 使用

  • Jquery设置下拉框select中的option选中

    Jquery对下拉框select默认选中和获取下拉框中值的。当select元素的值发生改变时,会发生触发chang...

  • select

    Select -- 下拉列表 属性 size:规定下拉列表中可见选项的数目 option: disabled:规定...

  • 前端开发学习第十八天

    下拉列表select 下拉列表和option这两个标签配合使用。 select标签属性 (1)multiple:可...

  • Vue element el-select 设置默认选中

    为了防止用户漏操作传入空值数据,在select下拉框中设置默认选中值。 定义可选择的下拉框内容 在页面初始化时自动...

网友评论

      本文标题:JS中select下拉列表选中的值

      本文链接:https://www.haomeiwen.com/subject/tymwrxtx.html