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

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


当前回答

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

e.options.selected索引

其他回答

这里的大多数答案通过纯文本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从输入/选择字段获取/放置值的各种示例。

源链接

使用Javascript和jQuery演示

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

以下脚本获取所选选项的值并将其放入文本框1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

下面的脚本从文本框2中获取一个值,并用其值发出警报

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

以下脚本正在从函数调用函数

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

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

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

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

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

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

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

给定如下所示的select元素:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

运行此代码:

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

结果如下:

value == 2
text == "test2"

交互示例:

var e=document.getElementById(“ddlViewBy”);函数onChange(){var值=e.value;var text=e.options[e.selectedIndex].text;console.log(值,文本);}e.onchange=onchange;onChange();<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>

onChange回调中的event.target.value为我提供了诀窍。