js如何获取select下拉框的value以及文本内容

港控/mmm° 2022-05-13 16:59 218阅读 0赞

</HEAD>
     <BODY>
         
          书籍分类:
          <select id="s1" >
              <option value="1">教学类</option>
              <option value="2"> 技术类</option>
          </select>
    </BODY>
    </HTML>

window.onload = function(){
        
            //首先获得下拉框的节点对象；
            var select = document.getElementById("s1");
            
            //1.如何获得当前选中的值？：
            var value = select.value;
            
            //2.如何获得该下拉框所有的option的节点对象
            var options = select.options;
            //注意：得到的options是一个对象数组
            
            //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样：
            var value1 = options[0].value;
            //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样：
            var text1 = options[0].text;
            
            //5.如何获得当前选中的option的索引？
            var index = select.selectedIndex;
            
            //6.如何获得当前选中的option的文本内容？
            //从第2个问题，我们已经获得所有的option的对象数组options了
            //又从第5个问题，我们获取到了当前选中的option的索引值
            //所以我们只要同options[index]下标的方法得到当前选中的option了
            var selectedText = options[index].text;
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关 Get Selected List Values关键字——适合获取多选下拉列表框中的value值。

[Get Selected List Value 关键字——获取页面中被选中的一个下拉列表的value值][Get Selected List Value _value]；

柔情只为你懂/ 2023年10月02日 08:28/ 0 赞/ 7 阅读

相关 JS：获取下拉框节点对象、当前值、索引、文本内容

window.onload = function(){ //首先获得下拉框的节点对象； var obj = document.getEl

痛定思痛。/ 2022年11月16日 10:47/ 0 赞/ 112 阅读

相关 vue基于element-ui select下拉框获取value和label的值

[https://www.jianshu.com/p/a2b593b15509][https_www.jianshu.com_p_a2b593b15509] [https:/

深藏阁楼爱情的钟/ 2022年11月12日 09:44/ 0 赞/ 153 阅读

相关 js,jq获取select下拉框的各项值

本文分别采用原生javaScript方法，jQuery方法实现，实现怎样获取select节点中的各项值。一、选择下拉框 <select id="selectDrop" n

墨蓝/ 2022年09月25日 03:21/ 0 赞/ 279 阅读

相关获得select下拉选择框的值和文本

$(document).on('change','.optext',function(){ var value = $(this).val()

我会带着你远行/ 2022年07月11日 05:32/ 0 赞/ 250 阅读

相关 select下拉框内容平铺设置

在select下拉框标签中加入：multiple="multiple"的属性，就可以不用下拉，直接把内容平铺显示。例如： ![70][] 这里有一个问题，就是会有“请

た入场券/ 2022年05月25日 11:42/ 0 赞/ 476 阅读

相关 js如何获取select下拉框的value以及文本内容

</HEAD> <BODY> 书籍分类: <select id="s1" >

港控/mmm°/ 2022年05月13日 16:59/ 0 赞/ 219 阅读

相关 js控制html下拉框select的选择

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

﹏ヽ暗。殇╰゛Y/ 2022年04月17日 04:15/ 0 赞/ 660 阅读

相关 js获取多个select下拉框选中的值

js获取多个select下拉框选中的值 var electronicIds = \[\]; $("select\[name='electronicId'\]").eac

清疚/ 2022年02月26日 20:20/ 0 赞/ 546 阅读

相关获取select下拉框的值（总结）

获取select下拉框的值最近学习用到就总结起来，以便日后复习啦~~ 案例： 1、新建web项目 2、下载jQuery 有两个版本的 jQuery 可供下载：

蔚落/ 2021年12月15日 05:01/ 0 赞/ 393 阅读