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. beta版本合集

    beta版本合集 [<p><span style="text-align: center; padding-bottom: 6px; background-color: # ...

  2. Tomcat安装、配置和部署笔记

    首先从Apache的官方网站(http://tomcat.apache.org/)下载Tomcat.有安装版和解压版两种,我个人喜欢用解压版. Tomcat安装(绿色版安装) 1.将下载的Tomcat ...

  3. Nginx使用教程(六)：使用Nginx缓存之FastCGI缓存

    启用FastCGI缓存 <br\>编辑必须启用缓存的虚拟主机配置文件. nano /etc/nginx/sites-enabled/vhost 将以下行添加到server{}指令之外的文件 ...

  4. centos7下升级SSH

    Linux 发行版中集成的 SSH 软件版本都比较老,存在着一些漏洞和安全隐患,需要升级 SSH 服务软件修补漏洞提升系统安全. SSH:SSH 有许多标准,通常 Linux 中 ( Redhat, ...

  5. Spring事务嵌套

    学习一下Spring的事务嵌套:https://blog.csdn.net/zmx729618/article/details/77976793 重点句子: Juergen Hoeller 的话:   ...

  6. 【转】CocoaPods的使用教程

    转载自:https://www.jianshu.com/p/dfe970588f95 前言 前几天发布我的开源库<最简单方便的iOS轮播开源库:JYCarousel>到CocoaPods的 ...

  7. CF176E Archaeology

    CF176E Archaeology 有一棵 \(n\) 个点的带权树,每个点都是黑色或白色,最初所有点都是白色的.有 \(m\) 个询问: 把点 \(x\) 从白色变成黑色 把点 \(x\) 从黑色 ...

  8. 学习使用PM2管理nodejs进程

    在项目中,偶尔对命令会忘记一下,所以在此记录下pm2的常用命令. 1. pm2是什么?pm2 是一个带有负载均衡的Node应用的进程管理器, 它能够管理Node应用,还能够对应用的运行状态进行监控. ...

  9. Java线程安全与锁优化

    线程安全的严谨定义: 当多个线程访问一个对象时,如果不用考虑这些线程在运行时环境下的调度和交题执行,也不需要进行额外的同步,或者调用方法进行其他任何操作,调用这个对象的行为都可以或者正确的结果,那么这 ...

  10. 百度地图JSAPI浏览器定位

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥 ...