js总结：利用js获取下拉框的value值和文本值

时间：2021-07-09 03:22:25

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&comma;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&period;js中使用select选择下拉框

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

随机推荐

  1. Objective-C学习笔记之block

    //定义一个函数,传入block类型参数myBlock5 int fun(int (^myBlock5)(int a,int b)) { return myBlock5(10,20); } int ( ...

  2. Vim常见操作汇总

    1.跳到文本的最后一行:按“G”,即“shift+g”2.跳到最后一行的最后一个字符 : 先重复1的操作即按“G”,之后按“$”键,即“shift+4”.3.跳到第一行的第一个字符:先按两次“g”,4 ...

  3. my97datepicker开始日期小于结束日期格式化时间精确届时分秒

    my97datepicker开始日期小于结束日期格式化时间精确到时分秒 一 , 需求: 结束时间 > 开始时间, 不符合的时间段不能选择.比如我选择开始日期是7月28,那结束的日期将只能从7月2 ...

  4. LPC1788的ADC和DAC使用

    #ifndef __ADC1_H_ #define __ADC1_H_ #include "common.h" #include "delay.h" void ...

  5. android 的android httpClient详解

    AndroidHttpClient结构: public final class AndroidHttpClient extends Object implements HttpClient 前言: 这 ...

  6. if else和switch case那个效率更高一点

    switch...case写法: switch (表达式){ case 值1 : 语句1 break; case 值2 : 语句2 break; ... default : 语句n break; } ...

  7. Vue中table表头合并的用法

    <div class="panel-container"> <div> <table class="table-head" wid ...

  8. Redis 在线管理工具（phpRedisAdmin）介绍

    phpRedisAdmin is a simple web interface to manage Redis databases. phpRedisAdmin 在 Redis clients 的列表 ...

  9. linux 其他知识目录

    博客目录总纲首页 为博客园添加目录的方法总结 linux 命令自动补全包 手动配置网卡 nginx日志统计 Linux 深入理解inode/block/superblock /proc/sys目录下各 ...

  10. php之快速入门学习-1

    貌似和JSP差不多! PHP 脚本可以放在文档中的任何位置. PHP 脚本以 <?php 开始,以 ?> 结束: <?php// PHP 代码?> PHP 文件的默认文件扩展名 ...

相关文章