zoukankan      html  css  js  c++  java
  • js总结:利用js获取下拉框的value值和文本值

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛。但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的。

    html代码:

     </HEAD>

       <BODY>

          

         书籍分类:

         <select id="s1" >

             <option value="1">教学类</option>

             <option value="2"> 技术类</option>

         </select>

     </BODY>

     </HTML>

     

    javascrtipt代码:

     

    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;

        }

     

  • 相关阅读:
    自然语言交流系统 phxnet团队 创新实训 项目博客 (十一)
    install ubuntu on Android mobile phone
    Mac OS, Mac OSX 与Darwin
    About darwin OS
    自然语言交流系统 phxnet团队 创新实训 项目博客 (十)
    Linux下编译安装qemu和libvirt
    libvirt(virsh命令总结)
    深入浅出 kvm qemu libvirt
    自然语言交流系统 phxnet团队 创新实训 项目博客 (九)
    自然语言交流系统 phxnet团队 创新实训 项目博客 (八)
  • 原文地址:https://www.cnblogs.com/iCheny/p/8798914.html
Copyright © 2011-2022 走看看