select中option的部分属性获取和设置

最新推荐文章于 2023-11-21 15:07:02 发布

gaoyusi4964238

最新推荐文章于 2023-11-21 15:07:02 发布

阅读量1.2w

点赞数

分类专栏： XML/HTML 文章标签： button html function input 存储

本文链接：https://blog.csdn.net/gaoyusi4964238/article/details/4379160

版权

XML/HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

html中的select元素的option值的获取和其他元素不同，主要表现在select值的获取必须在众多的option中选择，没有其他元素那么直观。

select的相关属性获取说的通俗点就是它的各个option的属性的获取（它的各个option是采用数组存储的），因此获取了它的option，其他的操作就很方便了，和text,button的操作一样。

option的获取方式采用以下方式：

document.getElemtById("selectID").option[index];

其中，selectID是需要操作的select的id,index是select下的option在数组中的下标，通过以下例子可以明白

这样，option的value和option中的显示值就很轻松的获取了，如：

value的获取为 document.getElemtById("selectID").option[index].value;

option中值的获取为 document.getElemtById("selectID").option[index].innerText;

select中初始化的默认option更改为 document.getElemtById("selectID").option[index].setAttribute("selected",true);

这里举一个具体的例子说明一下,具体代码如下：

<HTML> <head> <title>option test</title> </head> <mce:script type="text/javascript"></mce:script> <body> <input type="button" name="testOption" value="test" οnclick="testOption()"> <hr> <select name="test2" id="test2"> <option value="111" selected>before_selected</option> <option value="112">test12</option> <option value="113">after_selected</option> </select> </body> </HTML>

该例子用来实现一个点击test按钮，显示option value=“112”的value值，并修改select默认option（由before_selected变为after_selected）的功能。

gaoyusi4964238

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
select中option的部分属性获取和设置

html中的select元素的option值的获取和其他元素不同，主要表现在select值的获取必须在众多的option中选择，没有其他元素那么直观。 select的相关属性获取说的通俗点就是它的各个option的属性的获取（它的各个option是采用数组存储的），因此获取了它的option，其他的操作就很方便了，和text,button的操作一样。
复制链接

扫一扫