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. java语言基础02

    一.Java语言基础(常量的概述和使用)(掌握) 1:什么是常量 就是在程序的执行过程中其值不发生改变的量. 2:Java中常量的分类 (1):字面值常量 (2):自定义常量(面向对象部分讲解) 3: ...

  2. kickstart简介 20140707

    kickstart是红帽发行版中的一种安装方式,它通过以配置文件的方式来记录linux系统安装是的各项参数和想要安装的软件.只要配置正确, 整个安装过程中无需人工交互参与,达到无人值守安装的目的,因而 ...

  3. oracle的表名、字段名、constraint名的长度限制分别是多少？

    文章出处:http://blog.csdn.net/haiross/article/details/38379615 Oracle:表名.字段名.constraint名的长度有限制 oracle 的命 ...

  4. c#中操作word文档-三、MSDN文档

    这是关于word读写的MSDN内容,基本所有的方法都可以在这上面找到 https://msdn.microsoft.com/zh-cn/library/office/ff837519.aspx

  5. Vue.js学习 Item12 – 内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...

  6. PHP字符串拼接与MySQL语句

    这个部分总是钻牛角尖.总是出错. public function getList($pagesize=25){ $where = '1'; $tableName = $this->getTabl ...

  7. Sorl之.net操作

    http://www.cnblogs.com/zhangweizhong/category/771055.html 插入: SolrNet.Startup.Init<Movie>(&quo ...

  8. 第十一章 管理类型(In .net4.5) 之 管理对象的生命周期

    1. 概述 本章内容包括 管理非托管资源.使用IDisposable接口 以及 管理析构器和垃圾回收. 2. 主要内容 2.1 理解垃圾回收机制 ① 代码执行的时候,内存中有两个地方存放数据项:堆 和 ...

  9. VMware-workstation-full-9.0.0-812388+汉化补丁+有效密钥

    更新内容:https://www.vmware.com/support/ws90/doc/workstation-90-release-notes.html 官网下载地址:https://my.vmw ...

  10. poj 1679 The Unique MST

    题目连接 http://poj.org/problem?id=1679 The Unique MST Description Given a connected undirected graph, t ...