使用JavaScript在下拉列表中获取选定的值

Try

ddlViewBy.value

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Here is a JavaScript code line:

var x = document.form1.list.value;

Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

In 2015, in Firefox, the following also works.

e.options.selectedIndex

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the dom tree and then locating this element inside the form.

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

如果您曾经运行过纯粹为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;

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

以下代码展示了与使用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>

var strUser = e.options[e.selectedIndex].value;

这是正确的，应该会给您带来价值。是您要的文字吗？

var strUser = e.options[e.selectedIndex].text;

所以您在术语上很清楚：

<select>
    <option value="hello">Hello World</option>
</select>

该选项具有：

• 索引= 0
• 值=你好
• 文字= Hello World

如果您有一个如下所示的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 strUser = e.options[e.selectedIndex].value;

将strUser成为2。如果您真正想要的是test2，请执行以下操作：

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

这将strUser成为test2