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

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


当前回答

最简单的方法是:

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

其他回答

制作一个包含多个选项的下拉菜单(根据需要选择多个!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

我把它弄得有点滑稽。

下面是代码段:

<选择><option value=“RidicousObject”>香蕉鲨<option value=“SuperDuperCoding”>选择标记和选项标记!<option value=“未知”>添加更多标签以添加更多选项!</选择><h1>仅1个选项(无用)</h1><选择><option value=“Single”>单一选项</选择>

是的,片段奏效了。

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

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

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

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

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

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

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

e.options.selected索引

我不知道我是不是那个没有正确回答问题的人,但这对我很有用:

例如,在HTML中使用onchange()事件。

<select id="numberToSelect" onchange="selectNum()">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

JavaScript

function selectNum() {
    var strUser = document.getElementById("numberToSelect").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>