Javascript获取select下拉框选中的的值

最新推荐文章于 2024-05-03 13:26:42 发布

原创最新推荐文章于 2024-05-03 13:26:42 发布 · 578 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #ViewUI

web前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用javascript原生方法及jquery方法获取HTML下拉框的选中值和文本。原生方法通过getElementById获得select对象，再通过selectedIndex获取选中项索引，最后结合options属性获取值和文本。而使用jquery则直接选择选中项并调用val和text方法。

以下分别使用javascript原生的方法和jquery方法来获取下拉框的值

<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>

code:

一：javascript原生的方法

1:拿到select对象： var myselect=document.getElementById("test");

2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselect.options[index].value;

4:拿到选中项options的text： myselect.options[index].text;

二：jquery方法（前提是已经加载了jquery库）

1:var options=$("#test option:selected"); //获取选中的项

2:alert(options.val()); //拿到选中项的值

3:alert(options.text()); //拿到选中项的文本