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

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


当前回答

按照前面的回答,这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。(对于文本,我只是想展示一下)

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

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

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

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

不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。

其他回答

按照前面的回答,这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。(对于文本,我只是想展示一下)

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

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

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

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

不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。

您可以使用querySelector。

E.g.

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

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

这里的大多数答案通过纯文本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>

var selectedValue = document.getElementById("ddlViewBy").value;

以下是JavaScript代码行:

var x = document.form1.list.value;

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