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

IT技术 javascript html-select
2020-12-08 23:55:06

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

我尝试了下面的方法,但它们都返回选定的索引而不是值:

var e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  console.log(as, strUser);
}
e.onchange=show;
show();
<form>
  <select id="ddlViewBy">
    <option value="1">test1</option>
    <option value="2" selected="selected">test2</option>
    <option value="3">test3</option>
  </select>
</form>

6个回答

如果您有一个如下所示的 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.value;

将使strUser2如果您真正想要的是test2,请执行以下操作:

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

这将使strUsertest2

@OZZIE - 查看以var eOP 问题开头的赋值语句虽然e(或event) 表示是惯例eventObject,但这里 OP 使用它来表示元素。
2021-02-10 23:55:06
@TheRedPea——也许是因为在写这个答案时,有可能(无论多么遥远)需要容纳一个古老版本的 Netscape Navigator,所以使用了一种同样古老的方法来访问单个选择的值。但我只是猜测。;-)
2021-02-11 23:55:06
应该e.target.options[e.target.selectedIndex].text不知道为什么这里的所有答案都是错误的..
2021-02-15 23:55:06
var strUser = e.options[e.selectedIndex].value; 为什么不只是 var strUser = e.value ?
2021-03-02 23:55:06
我是这样用的: var e = document.getElementById("ddlViewBy").value;
2021-03-06 23:55:06

纯 JavaScript:

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

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];
仍然有用 - 感谢您写出变体/语言!现在,如果我只知道 Office JS API Dropdown 的等效项...
2021-02-08 23:55:06
这确实以不同的方式对我有用。$("#ddlViewBy :selected").val() 不是没有选择
2021-02-13 23:55:06
我一定是做错了什么,因为当我尝试这个时,我会返回下拉菜单中每个选项的文本。
2021-02-26 23:55:06
element.options[e.selectedIndex].value 必须是 element.options[element.selectedIndex].value
2021-03-03 23:55:06
应该e.target.options[e.target.selectedIndex].text不知道为什么这里的所有答案都是错误的..
2021-03-03 23:55:06
var strUser = e.options[e.selectedIndex].value;

这是正确的,应该给你value。是你想要的文字吗?

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

所以你对术语很清楚:

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

此选项具有:

  • 指数 = 0
  • value=你好
  • 文本 = 你好世界
是的 - 使选项的值与其实际值相同。更简单 - 上面的人需要编写更多的代码来弥补他最初的含糊不清。
2021-02-11 23:55:06
我认为 javascript 中的“.value”应该为我返回值,但只有“.text”会返回 asp.net 中的 .SelectedValue 返回的值。谢谢举例!
2021-02-21 23:55:06
应该e.target.options[e.target.selectedIndex].text不知道为什么这里的所有答案都是错误的..
2021-02-28 23:55:06

以下代码展示了与使用 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>
onchange=run(this.value)或者(this.text)可以更有益。
2021-02-28 23:55:06
var selectedValue = document.getElementById("ddlViewBy").value;
这是最简单的解决方案,至少对于现代浏览器而言是这样。另见W3Schools
2021-02-14 23:55:06