如果用JavaScript获取标准下拉框的"选中值"和"选中文本"

在html中标准下拉框很常用,经常有这样的需求在下拉框改变的时候我们需要获取它的文本或值。

初学JS的朋友经常会把它的值和文本搞错,把两者混为一谈。

有的时候还会歪打正着,因为经常我们的值就是我们的文本,但是实际它们是不同的东西。

下面我们来举个例子。

我们先建立一个下拉框,如下:

<select name="selOp" id="selOp" onchange="GetSelValue();">
    <option selected value="a">a1</option>
    <option value="b" >b2</option>
    <option value="c" >c3</option>
    <option value="d" >d4</option>
    <option value="e" >e5</option>
</select>

 

JS代码如下:

function GetSelValue() {
        var objSel = document.getElementById("selOp");
        
        //这是获取值
        alert("当前值: " + objSel.value);
        
        //这是获取文本
        alert("当前文本: " + objSel.options(objSel.selectedIndex).text);
}

 

时间: 2024-09-20 04:06:05

如果用JavaScript获取标准下拉框的"选中值"和"选中文本"的相关文章

JavaScript获取Select下拉框OptionValue和Text值方法

  Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个form表单中的Select下拉框菜单为例,来说明如何用JavaScript获取其Value值和Text值: 示例表单,里面是一个select下拉列表框的各个列表项及值: 接下来是JavaScript部分,获取Select的各个Value值和Text值:

如何根据班级获取学员下拉框数据

前台页面 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>根据班级获取学员下拉框数据</title> <script type="text/javascript" > //1.页面加载完毕后创建异步对象 请求班级数据 window.onload = function (

jQuery获取(选中)单选,复选框,下拉框中的值

 本篇文章主要是对jQuery获取(选中)单选,复选框,下拉框中的值的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 实例如下:    代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title>   <meta http-equiv="

jquery及原生js获取select下拉框选中的值示例_javascript技巧

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

javascript中select下拉框的用法总结_javascript技巧

本文针对开发项目中遇到的问题,进行了汇总问题1:如何选择select的option里面的值? 首先会用到一个方法 onchange():这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="

我在脚本要获取一个select下拉框的集合值,然后我用我的变量值 等于这个下拉框里的值是 就选中这个为第一个

问题描述 就是获取一个selecet下拉框的对象里面的集合.我在脚本里我有个值,如果这个值等于下拉框里的值则让这个值为默认选中.在脚本怎么设置它让他等于时候默认选中 解决方案 解决方案二:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>NewDocument</TITLE><METANAME="Generato

JavaScript实现单击下拉框选择直接跳转页面的方法_javascript技巧

本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

JavaScript实现单击下拉框选择直接跳转页面的方法

  本文实例讲述了JavaScript实现单击下拉框选择直接跳转页面的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <script type="text/JavaScript"> <!-- function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='&quo

用jQuery获取IE9下拉框默认值问题探讨

本文与大家详细探讨下用jQuery获取IE9下拉框默认值的问题,如果下拉框没有空默认值会怎么样等一系列问题,感兴趣的朋友可以参考下哈,希望对大家有所帮助   在IE 9.0.8112.16421 下,如果下拉框没有空默认值, 在不对它的option设置select属性情况下,用jquery的 $("#id").find("option:selected").val();方法 将无法取到他的默认值.而在FireFox.chrome.其他IE版本包括IE9的其他小版本下