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

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


当前回答

我认为您可以将事件侦听器附加到select标记本身,例如:

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

在这种情况下,您应该确保所有选项都有一个value属性,并且它们不为空。

其他回答

以下是JavaScript代码行:

var x = document.form1.list.value;

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

最简单的方法是:

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

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

您可以使用querySelector。

E.g.

var myElement = document.getElementById('ddlViewBy');

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

Try

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log(ddlViewBy.value);console.log(ddlViewBy.selectedOptions[0].text);<select id=“ddlViewBy”><option value=“1”>快乐</option><option value=“2”>树</option><option value=“3”selected=“selected”>朋友</option></选择>