关于html选择：使用JavaScript在下拉列表中获取选定的值？


Get selected value in dropdown list using JavaScript?

如何使用javascript从下拉列表中获取所选值？

我尝试了以下方法，但它们都返回选定的索引而不是值：

1
2
3
4
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
var value = document.getElementById("ddlViewBy").value;
相关讨论

如果有如下所示的select元素：

1
2
3
4
5
<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

运行此代码：

1
2
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

会使strUser成为2。如果你真正想要的是test2，那么就这样做：

1
2
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

这将使strUser成为test2。

相关讨论

纯JavaScript：

1
2
3
var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery：

1
2
$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

安格拉尔：(http://jsfiddle.net/qk5wwyct)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>
Text: {{selectItem.text}}
</p>
<p>
Value: {{selectItem.value}}
</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];
相关讨论

1
var strUser = e.options[e.selectedIndex].value;

这是正确的，应该给出值。你要的是文本吗？

1
var strUser = e.options[e.selectedIndex].text;

所以你对术语很清楚：

1
2
3
<select>
    <option value="hello">Hello World</option>
</select>

此选项具有：

  • 索引＝0
  • 价值=你好
  • TEXT=你好世界
相关讨论

下面的代码展示了使用javascript从输入/选择字段获取/放置值的各种示例。

源链接

工作演示

1
2
3
4
5
6
7
8
9
10
 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select>
TextBox1
<input type="text" id="srt" placeholder="get value on option select">
TextBox2
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

以下脚本正在获取所选选项的值并将其放入文本框1中

1
2
3
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }

以下脚本正在从文本框2中获取值并用其值发出警报

1
2
3
4
5
6
    function up() {
        //if (document.getElementById("srt").value !="") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }

以下脚本正在从函数调用函数

1
2
3
4
5
6
7
8
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?

1
var selectedValue = document.getElementById("ddlViewBy").value;
相关讨论

如果您遇到纯粹为IE编写的代码，您可能会看到：

1
2
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

在firefox et al中运行上述命令会给您一个"is not a function"错误，因为ie允许您不必使用()而使用[]：

1
2
var e = document.getElementById("ddlViewBy");    
var strUser = e.options[e.selectedIndex].value;

正确的方法是使用方括号。

1
2
3
4
5
6
<select id="Ultra" onchange="alert(this.value)">
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

只使用

  • 用于获取所列文本的$('#SelectBoxId option:selected').text();。

  • 用于获取所选索引值的$('#SelectBoxId').val();。

相关讨论

初学者可能希望从具有name属性而不是id属性的select中访问值。我们知道所有表单元素都需要名称，甚至在它们获得ID之前。

所以，我要添加getElementByName()解决方案，以供新开发人员查看。

铌。表单元素的名称必须是唯一的，这样表单在发布后才能使用，但DOM可以允许多个元素共享一个名称。出于这个原因，如果可以，可以考虑向表单添加ID，或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y显式地添加ID。

使用getElementByName的示例：

1
2
var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
相关讨论

由于代码的可能性、直观性以及使用id与name的对比，以前的答案仍有改进的余地。可以读取所选选项的三个数据——索引号、值和文本。这个简单的跨浏览器代码可以完成以下三项工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    Demo GetSelectOptionData
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;
</p>
    <p id="secondP">&nbsp;
</p>
    <p id="thirdP">&nbsp;
</p>

   
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     
</body>
</html>

现场演示：http://jsbin.com/jiwena/1/edit？HTML，输出。

id应用于化妆。出于功能形式的目的，name仍然有效，也在html5中，并且仍应使用。最后，注意在某些地方使用方括号和圆括号。如前所述，只有(旧版本的)IE在所有地方都可以接受圆形的。

使用jQuery：

1
$(‘select’).val();

您可以使用querySelector。

例如。

1
2
3
var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

有两种方法可以做到这一点：使用JavaScript或JQuery。

JavaScript：

1
2
3
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

或

1
2
3
4
5
6
7
8
9
var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // this will output the value selected

alert (text); // this will output the text of the value selected

jQuery：

1
2
3
$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

如何工作的运行示例：

1
2
3
4
5
6
var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value:"+ val1);
document.write("<br />Selected option Text:"+ txt);
1
2
3
4
5
<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

注意：下拉列表更改时，值不会更改，如果您需要该功能，则需要实现onclick更改。

相关讨论

按照上面的答案，这就是我如何做到的。这是为了获取所选选项的实际文本。已经有了很好的例子来获取索引号。(对于课文，我只想用这种方式展示)

1
var selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

在一些罕见的情况下，您可能需要使用括号，但这将是非常罕见的。

1
var selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

我怀疑这个过程比二线版本快。我只想尽可能多地整合我的代码。

如果有人知道如何在一行中完成这项工作，而不必两次获取元素，那么我希望您能发表评论并向我展示这一点。我还没弄清楚…

另一个解决方案是：

1
document.getElementById('elementId').selectedOptions[0].value

在2015年，在火狐中，以下功能同样有效。

e.options.selectedIndex

下面是一个javascript代码行：

1
var x = document.form1.list.value;

假设名为list name="list"的下拉菜单包含在名属性为name="form1"的表单中。

相关讨论

我有点不同的看法，如何做到这一点。我通常使用以下方法来完成这项工作：(据我所知，这是一种更简单的方法，可以与所有浏览器一起使用。)

1
2
3
4
5
6
<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

就这么做：document.getElementById('idselect').options.selectedIndex。

然后，我将从0开始获取select index值。

我能看到这段代码不起作用的唯一原因是，如果您使用的是IE7-，并且忘记为您的标记指定value属性…其他浏览器都应该将"打开-关闭"标记中的内容转换为选项值。

您只需使用selectElement.value就可以获得所选选项的值。

1
document.getElementById("idOfSelect").value;

1
2
3
4
5
6
var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent ="Selected Value:"+select.value;
select.addEventListener("change", function(e){
  res.textContent ="Selected Value:"+select.value;
});
1
2
3
4
5
6
7
8
9
10
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>


</p>

以下是在onchange函数中执行此操作的简单方法：

event.target.options[event.target.selectedIndex].dataset.name

相关讨论