使用JavaScript获取下拉列表中的选定值

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

<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>

当前回答

纯JavaScript：

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

jQuery：

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

角度JS：(http://jsfiddle.net/qk5wwyct):

// 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'
}];

2011-12-18 02:08:16

其他回答

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</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>

    <script>
        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);
        }
    </script>
</body>
</html>

现场演示：http://jsbin.com/jiwena/1/edit?html输出

id应用于化妆。出于函数形式的目的，名称仍然有效，在HTML5中也是如此，应该仍然使用。最后，请注意在某些地方使用方括号和圆括号。正如前面所解释的，只有（旧版本的）Internet Explorer在所有地方都接受圆形。

2015-05-22 02:42:35

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

e.options.selected索引

2015-10-22 22:38:14

另一种解决方案是：

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

2018-07-18 18:49:01

只需使用

$（'#SelectBoxId选项：selected'）.text（）；获取列出的文本$（'#SelectBoxId'）.val（）；用于获取所选索引值

2014-02-18 11:01:56

最简单的方法是：

var value = document.getElementById("selectId").value;

2020-04-01 12:34:04

使用JavaScript获取下拉列表中的选定值

推荐文章

最新文章

标签