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

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


当前回答

这里的大多数答案通过纯文本JavaScript选择器获取“this”select菜单的值。

例如:

document.getElementById("ddlViewBy").value;

这不是干式方法。

DRY(三行代码):

function handleChange(e) {
  let innerText = e.target[e.target.options.selectedIndex].innerText;
  let value = e.target.value;
  /* Do something with these values */
}

获取第一个选择选项:

console.log(e.target[0]); /* Output: <option value="value_hello">Hello innerText</option>*/

考虑到这个想法,我们动态返回一个“this”选择选项项(通过selectedIndex):

e.target[e.target.options.selectedIndex].innerText;

Demo

let log=document.getElementById('log');函数句柄更改(e){let innerText=e.target[e.target.options.selectedIndex].innerText;let value=e.target.value;log.innerHTML=`<table><tr><th>值</th><th>innerText</th></tr><tr><td>${value}</td><td>${innerText}</td></tr></table>`;}<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"><select id=“greet”onchange=“handleChange(event)”><option value=“value_hello”>hello innerText</option><option value=“value_goodbye”>再见innerText</option><option value=“value_seeYou”>再见。。。innerText</option></选择><select id=“other_select_menu”onchange=“handleChange(event)”><option value=“value_paris”>paris innerText</option><option value=“value_ny”>纽约innerText</option></选择><div id=“log”></div>

其他回答

有两种方法可以使用JavaScript或jQuery完成此操作。

JavaScript:

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

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

OR

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:

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

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

您可以使用querySelector。

E.g.

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

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

对于如何实现这一点,我有一点不同的看法。我通常使用以下方法(这是一种更简单的方法,而且据我所知,它适用于所有浏览器):

<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>

使用jQuery:

$('select').val();

如果您遇到过纯为Internet Explorer编写的代码,您可能会看到:

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

在Firefox等中运行上述命令会导致“不是函数”错误,因为Internet Explorer允许您使用()而不是[]:

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

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