js获取select下拉框的value和文本

最新推荐文章于 2022-03-02 17:39:36 发布

原创最新推荐文章于 2022-03-02 17:39:36 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #select #javascript

js 同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文介绍如何使用JavaScript从HTML下拉框中获取被选中的选项值及其文本内容。通过示例代码展示了如何获取下拉框元素、读取当前选中的值、获取所有选项及其值，并提取选中项的文本。

html代码：

 <select id="sf" name="arriveSf" class="ui dropdown" style="width: 25%">
     <option value="11111" >湖南</option>
 </select>

js代码：

     var select = document.getElementById("sf");//获取下拉框的节点对象
     var value = select.value;//获取当前选中的值      
     var options = select.options;//获取下拉框所有option的节点对象,得到的options是一个对象数组
     var value1 = options[0].value; //获取第几个option的value值
     var text1 = options[0].text; //获取第几个option的文本
     var index = select.selectedIndex;//获取选中option的索引
     var selectedText = options[index].text;//获取选中option的文本

意思就是如果我们想要获取选中的option的text文本”湖南”的话：

        var sf = document.getElementById("sf");
        var sfIndex = sf.selectedIndex;
        var sfText = sf.options[sfIndex].text;//sfText 就是选中option的text值