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. python3中list列表的一些操作

    最近遇到许多List的操作,感觉它是一种很重要的一种基础数据结构,本人掌握的也不是很扎实,这里找了一些列表的操作,常用函数,记录下来,希望对大家有用.如果理解有偏差,欢迎指正,感谢! (1)列表的合并 ...

  2. oracle外部表

    关于外部表的描述 正确描述 the create table as select statement can be used to upload data into a normal table in ...

  3. Amazon onsite behavior question

    https://www.1point3acres.com/bbs/thread-307462-1-1.html http://kraftshala.com/how-to-raise-the-bar-i ...

  4. 缺少 mysqli 扩展。请检查 PHP 配置。

    安装了新的lamp,想打开数据库,结果出现了这种错误: phpMyAdmin - 错误缺少 mysqli 扩展.请检查 PHP 配置. <a href="Documentation.h ...

  5. 浅析data:image/png;base64的应用

    ...我也是加一个网安交流群发现了他们的入群密码是这个 数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR ...

  6. c# 链接mongDB集群实战开发3

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zuoming120/article/details/25702295 c# 链接mongDB集群 一 ...

  7. java中的多态是怎么体现的

    多态是父类的引用指向了自己的子类对象. 当调用方法时,会根据对象去调用方法,先在子类中找,没有就去父类中找 总结:成员变量是在编译阶段绑定的,方法时在运行阶段绑定的.属性不能重写,方法可以重写. pu ...

  8. [CQOI2018]异或序列

    嘟嘟嘟 前缀和+莫队. 先用前缀和预处理异或,于是问题变成了在\([L - 1, R]\)中求两个数异或等于\(k\)的数对个数. 然后就离线排序,按套路维护两个指针加加减减,并维护一个桶,每一次加\ ...

  9. P1433 吃奶酪（搜索DFS+记忆化）

    emmmmm,我还是看了题解的....尴尬,其实不用记忆化搜索也是可以的.因为我不用也是最后一个点超时.但是我是用的贪心+DFS...超时的原因是贪心....mmp,本来加贪心就是为了不超时.... ...

  10. 从零开始的ESP8266探索（1）-使用Server功能搭建Web Server

    https://blog.csdn.net/Naisu_kun/article/details/80398667 文件系统 https://blog.csdn.net/solar_Lan/articl ...