使用JavaScript获取select元素选中的value和text

时间：2023-01-15 23:23:44

示例代码如下(js直接写在了html里面，没有写在一个单独的外部文件中)：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>select元素</title>

</head>

<body id="bodyform">

    <select id="month">

         <option  value="01">January</option>

         <option  value="02">February</option>

         <option  value="03" selected="selected">March</option>

         <option  value="04">April</option>

         <option  value="05">May</option>

         <option  value="06">June</option>

         <option  value="07">July</option>

         <option  value="08">August</option>

         <option  value="09">September</option>

         <option  value="10">October</option>

         <option  value="11">November</option>

         <option  value="12">December</option>

    </select>

    <div>

        <input type="button" onclick="showValue()" value="显示Value值"></input>

        <input type="button" onclick="showText()" value="显示Text值"></input>

    </div>

</body>

      <script type="text/javascript">

          function showValue(){

            /*获取select选中的对象的value*/

            var select=document.querySelector("#month");

            alert("Value值:"+select.value);

          }

          function showText(){

            /*获取select选中的对象的text*/

            var select=document.querySelector("#month");

             alert("Text值:"+select.options[select.selectedIndex].text);

          }

      </script>

</html>

界面：

使用JavaScript获取select元素选中的value和text

运行效果如下：

点击显示Value值

使用JavaScript获取select元素选中的value和text

点击显示Text值

使用JavaScript获取select元素选中的value和text

使用JavaScript获取select元素选中的value和text的更多相关文章

  1. JQuery 获取select被选中的value和text

    html代码: <select name="test" > <option value="0">请选择</option> & ...

  2. JavaScript 获取Select标签选中的项

    <select name="select1" id="select1" onchange=setInput()> <option value= ...

  3. Javascript获取select的选中值和选中文本&lpar;转载&rpar;

    var obj = document.getElementById(”select_id”); //selectid var index = obj.selectedIndex; // 选中索引 va ...

  4. jQuery获取Select元素

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  5. jQuery获取select元素选择器练习

    jQuery获取Select选择的Text和Value:语法解释: 1. $("#select_id").change(function(){//code...}); //为Sel ...

  6. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  7. 获取select标签选中状态 的label的值。

    <select name="procode" onchange="alert(this.options[this.selectedIndex].text)&quot ...

  8. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

  9. JavaScript获取html元素的实际宽度和高度

    一.JavaScript获取html元素宽高 1.宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offs ...

随机推荐

  1. Python编码问题整理

    认识常见编码 GB2312是中国规定的汉字编码,也可以说是简体中文的字符集编码 GBK 是 GB2312的扩展 ,除了兼容GB2312外,它还能显示繁体中文,还有日文的假名 cp936:中文本地系统是 ...

  2. Windows 8&period;1 Hyper-V安装的虚拟机

    一.安装Hyper-v Hyper-V内置于Windows 8中,用户无需格外的下载安装文件,只需要到Windows 8的程序管理中将其选中开启功能即可. 具体步骤:控制面板→程序→启用或关闭Wind ...

  3. Zend Framework 2参考Zend&bsol;Authentication&lpar;摘要式身份验证&rpar;

    Zend Framework 2参考Zend\Authentication(摘要式身份验证) 介绍 摘要式身份验证是HTTP身份验证的方法,提高了基本身份验证时提供的方式进行身份验证,而无需在网络上以 ...

  4. Linux下tar bz gz等压缩包的压缩和解压

    Linux下用户经常需要备份计算机系统中的数据,为了节省存储空间,常常将备份文件进行压缩,本文是对压缩和解压命令的大致总结 .tar.gz  解压:tar zxvf FileName.tar.gz  ...

  5. Java&lowbar;重载与重写

    在java中,重载与重写都是多态的体现.重载(Overload)体现的是编译时多态,而重写(Override)体现了运行时多态. 重载(Overload): 定义:在一个类中,同名的方法如果有不同的参 ...

  6. Eureka 2&period;0 开源流产，真的对你影响很大吗？

    本文首发于 http://blog.didispace.com/Eureka-2-0-discontinued/ 最近连续发烧四天,偶尔刷两下朋友圈都能看到好几条来自不同号的关于<Eureka ...

  7. Linux 小知识翻译 - 「X Window系统」

    X Window System是给Unix系的OS提供的一套窗口管理软件或者说是组件.X Window System已经成为了在Linux上使用GUI环境的不可或缺的东西了. X Window Sys ...

  8. 在Linux下，如何分析一个程序达到性能瓶颈的原因

    0.在Linux下,如何分析一个程序达到性能瓶颈的原因,请分别从CPU.内存.IO.网络的角度判断是谁导致的瓶颈?注意现在的机器CPU是多核 1.用sar -n DEV 1 10 2.用iotop命令 ...

  9. MVC项目实践&comma;在三层架构下实现SportsStore-11&comma;使用Knockout实现增删改查

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  10. VC&plus;&plus;6&period;0调试：Watch窗口的使用

    #include <stdio.h> #include <windows.h> class AutoExpand { public: AutoExpand(int val, c ...

相关文章