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. C# -- 使用Aspose.Cells创建和读取Excel文件

    使用Aspose.Cells创建和读取Excel文件 1. 创建Excel Aspose.Cells.License li = new Aspose.Cells.License(); li.SetLi ...

  2. Python爬虫-04：贴吧爬虫以及GET和POST的区别

    目录 1. URL的组成 2. 贴吧爬虫 2.1. 只爬贴吧第一页 2.2. 爬取所有贴吧的页面 3. GET和POST的区别 3.1. GET请求 3.2. POST请求 3.3. 有道翻译模拟发送 ...

  3. 贪心——D - Radar Installation

    Assume the coasting is an infinite straight line. Land is in one side of coasting, sea in the other. ...

  4. Java基础知识点（一）

    前言:本篇随笔,主要记录Java的基础知识点,不管是用于项目或者面试中,笔者认为都非常有用,所以将持续更新...... 1.Java的访问权限 Java中有四种访问权限:默认访问权限.public.p ...

  5. Oracle补丁术语介绍

    在使用Oracle的技术支持服务的时候,经常会遇到补丁相关的术语.现在对这些术语做些解释说明: Interim patch/One-off patch:是我们常说的小补丁,为了修复某(几)个Bug而发 ...

  6. ssm框架的整合搭建（二）

    maven简单项目的创建前面已经完成了,下面开始依赖包和配置文件的编写 好好努力每一天!!!!!! 项目结构看这里 1.首先,依赖包pom.xml <project xmlns="ht ...

  7. 路飞学城-Python开发集训-第1章

    学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...

  8. linux防火墙开放和禁用指定端口

    一.例如:开放8080端口 firewall-cmd --permanent --add-port=8080/tcp 二.重启使设置生效 systemctl restart firewalld.ser ...

  9. X--名称空间详解

    转自:http://blog.csdn.net/lisenyang/article/details/18312039 X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的. ...

  10. Java Statement PK PrepareStatement

    PreparedStatement是用来执行SQL查询语句的API之一,Java提供了 Statement.PreparedStatement 和 CallableStatement三种方式来执行查询 ...