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

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

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

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

  2. js如何获取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. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

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

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

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

  7. Jquery学习笔记：利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...

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

    有一id=test的下拉框,怎么获取选中的那个值呢? 分别使用javascript方法和jquery方法 <select id="test"  name="&quo ...

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

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

随机推荐

  1. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  2. python之IO目录处理

    IO目录处理 在使用io常用函数之前,必须要在py文件头部import os.os是(Operation system)的缩写,意思就是系统操作. 1. 创建删除目录 #!/usr/bin/pytho ...

  3. 洛谷 P2518 [HAOI2010]计数 (组合数)

    题面 luogu 题解 本来想练数位dp的,结果又忍不住写了组合数.. 去掉一个\(0\)可以看作把\(0\)移到前面去 那么题目转化为 \(n\)有多少个排列小于\(n\) 强制某一位比\(n\)的 ...

  4. 洛谷 P3177 [HAOI2015]树上染色

    题目链接 题目描述 有一棵点数为 \(N\) 的树,树边有边权.给你一个在 \(0~ N\) 之内的正整数 \(K\) ,你要在这棵树中选择 \(K\)个点,将其染成黑色,并将其他 的\(N-K\)个 ...

  5. 能量项链 （区间DP）

    能量项链 (区间DP) 问题引入 能量项链 洛谷 P1063 思路 诸如此类不能线性规划的问题要用到区间DP,区间DP一般就是三层循环,第一层表示区间长度(本题即\(n\)),第二层枚举起点并根据第一 ...

  6. UVALive - 3722 找规律

    题意:找规律 题解:找规律 结论是\(a^n(x-1)-\sum_{i=1}^{n-1}a^i \mod\ c\) #include<iostream> #include<algor ...

  7. python操作Spark常用命令

    1. 获取SparkSession spark = SparkSession.builder.config(conf = SparkConf()).getOrCreate() 2. 获取SparkCo ...

  8. PIE SDK缨帽变换

    1.算法功能简介 缨帽变换是根据多光谱遥感中土壤.植被等信息在多维光谱空间中信息分布结构对图像做的经验性线性正交变换. PIE 支持对 Landsat MSS. Landsat 5 TM.Landsa ...

  9. Python max 和 min高级用法

    zip max 比较一个字典,是按key比较 如果想比较字典的value max比较只能是相同类型,比如字符串和数字就不能比较会报错 这种会报错

  10. Python Fileinput 模块

    作者博文地址:http://www.cnblogs.com/liu-shuai/ fileinput模块提供处理一个或多个文本文件的功能,可以通过使用for循环来读取一个或多个文本文件的所有行. [默 ...