select下拉框在项目开发中是经常用到的，特别是在联级菜单方面的应用更为广泛。但是，对于一些初学者来说，如何获取下拉框子节点option的value值和文本内容，还是有一点难度的。
其他的就不说了，现在我就写一段代码，简单的说明一下如何获取value值以及文本内容(text),必要地添加了注释，希望对下拉框还不太熟悉的朋友有所帮助。
html代码：
1 </HEAD>

 2  <BODY>

 3

 4     书籍分类:

 5     <select id="s1" >

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

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

 8     </select>

 9 </BODY>

10 </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;

    }

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

  1. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  2. 获取select下拉框的value以及文本内容

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

  3. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  5. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  6. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. js获取select下拉框的value值和text文本值

    介绍一种取下拉框值以及绑定下拉框数据的方法    这里用到的jquery-ui-multiselect插件 1.前台html代码 <span class="ModuleFormFiel ...

  8. js获取select下拉框中的值

    现在有一id为userType的下拉框,怎么获取选中的值: 用户类型: <select name="type" id="userType"> < ...

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

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

随机推荐

  1. APUE第一章_课后习题

    /* 未完成的:1.5 不过在下文中已经给出了解答. */ 1.1 在系统上查证,除根目录外,目录.和..是不同的 ans:这个很容易,用vim打开.和..就可以看到区别. 1.2 分析程序清单1-4 ...

  2. Android IOS WebRTC 音视频开发总结（六四）-- webrtc能走多远我不知道，但这个市场真实存在

    本文主要总结目前都有哪些使用场景用到webrtc,文章最早发表在我们的微信公众号上,详见这里, 欢迎关注微信公众号blackerteam,更多详见www.blackerteam.com webrtc只 ...

  3. PayPal 开发详解（二）：开启【自动返回】和【数据传输】

    1.使用我们的商家测试帐号登录 sandbox :http://www.sandbox.paypal.com Business帐号登录 2.登录以后点击:[我的paypal]->[用户信息]-& ...

  4. 信息图形（Infographic）

    信息图形(Infographic),又称为信息图,是指数据.信息或知识的可视化表现形式.信息图形主要应用于必须要有一个清楚准确的解释或表达甚为复杂且大量的信息,例如在各式各样的文件档案上.各个地图及标 ...

  5. linux ubuntu装机到可实现java（eclipse，intellij IDEA，android）开发全过程

    前言:linux是个很强的东西,你可以在其中体验开发的神速,有如神助,但是同时系统的不完整,错误漏洞多也是ubuntu等系统的诟病,所以大家遇到任何问题,第一时间请淡定,随后百度,google一下吧, ...

  6. datagridview下拉框

    下面介绍Winform中DataGridView的DataGridViewComboBoxColumn的使用方法: //首先获取数据源 //自己建立的静态数据源,你也可以从数据库读取 DataTabl ...

  7. sublime几个有用的快捷键

    几个有用的快捷键:Ctrl+D:选择多个相同字符串进行修改.选中字符串,按住Ctrl+D,继续选中下一个.Ctrl+Shift+L:将选中的内容切割成多行,然后每一行可以同时编辑Ctrl+J:将已选择 ...

  8. 浅谈DEs，AES

    1. AES加密,相对比较简单,之前已经配置好工具类. package com.bbguoxue.poetry.util; import java.security.SecureRandom; imp ...

  9. FireFox Prevent this page from creating addtional dialogs 火狐浏览器 设置 阻止此页面创建更多对话框

    FireFox英文版本老弹出“Prevent this page from creating addtional dialogs”的确认框 FireFox english version alert ...

  10. 使用DataGridView数据窗口控件，构建用户快速输入体验

    在"随风飘散" 博客里面,介绍了一个不错的DataGridView数据窗口控件<DataGridView数据窗口控件开发方法及其源码提供下载>,这种控件在有些场合下,还 ...