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;

}

js总结：利用js获取下拉框的value值和文本值的更多相关文章

  1. Java-Selenium，获取下拉框中的每个选项的值，并随机选择某个选项

    今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下 <select class="form-c ...

  2. 下拉框改变事件：获取下拉框中当前选择的文本 SelectionChanged事件

    /// <summary> /// 下拉框改变事件:获取下拉框中当前选择的文本 /// </summary> /// <param name="sender&q ...

  3. Js获取下拉框当前选择项的文本和值

    现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地       区: ...

  4. 如何获取select下拉框中option选中的文本值

    $(select的id或者class).change(function(){ $(this).find("option:selected").text() }) 源文:https: ...

  5. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  6. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  7. 用js 实现代码获取下拉框的value值

    var rtl=document.getElementById("selpartyorg"); //获取下拉框对象 var id=rtl.options[rtl.selectedI ...

  8. 原生js获取下拉框下标

    // 获取下拉框所选下标 传入下拉框的id function getselectscheckitemindex (idStr) { let o = document.getElementById(id ...

  9. js实现可输入的下拉框

    <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...

  10. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

随机推荐

  1. Win10 C盘桌面文件右上方的两个蓝色箭头解决方案

    之前看网上有很多桌面蓝色箭头的解决方案,也进行了一些尝试 可是每次Win10系统更新之后蓝色箭头就会重新显示. 最终方案:将建立在桌面的C盘文件移到D盘,桌面创建对应的快捷方式. 一劳永逸,暴力破解.

  2. PHP使用Apache中的ab(ApacheBench)测试网站的并发量

    AB(ApacheBench) 是 Apache 自带的超文本传输协议 (HTTP) 性能测试工具. 其设计意图是描绘当前所安装的 Apache 的执行性能, 主要是显示 Apache 每秒可以处理多 ...

  3. LeetCode算法题-Power of Four（Java实现-六种解法）

    这是悦乐书的第205次更新,第216篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第72题(顺位题号是342).给定一个整数(带符号的32位),写一个函数来检查它是否为4 ...

  4. python反向生成数据库模型类

    之前去的一家公司,去的时候项目已经好了,但是需要我根据数据库做一个后台管理系统,管理用户和其他的一些数据. 直接说方法 django框架 python manage.py inspectdb > ...

  5. AIX查看系统版本

    AIX系统版本   1. AIX 主要版本.次要版本.维护级 oslevel -r  lslpp -h bos.rte      2. 确定某个特定的 AIX 级别缺少哪些文件集更新 举例,若要确定 ...

  6. RMQ 字符串 F. Strings and Queries

    F. Strings and Queries time limit per test 2.5 s memory limit per test 256 MB input standard input o ...

  7. 利用ENVI FX从RGB提取建筑物轮廓

        在QQ热线或者技术咨询会问到:"我有一副RGB的栅格图,想从上面提取相关的一些信息.能不能提取?精度有保证吗?"等等诸如此类的问题.本专题就採用我们经常使用的栅格地图进行建 ...

  8. JS函数防抖与函数节流

    概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...

  9. 转://云和恩墨的两道Oracle面试题

    真题1. 对于一个NUMBER(1)的列,如果查询中的WHERE条件分别是大于3和大于等于4,那么这二者是否等价? 答案:首先对于查询结果而言,二者没有任何区别.从这一点上讲无论是指定大于3还是指定大 ...

  10. Spring batch

    学习了解 https://www.ibm.com/developerworks/cn/java/j-lo-springbatch1/index.html?ca=drs-#ibm-pcon