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

小开

最佳答案

给定一个像这样的选择元素：

<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 == 2text == "test2"

交互示例：

var e = document.getElementById("ddlViewBy");function onChange() {var value = e.value;var text = e.options[e.selectedIndex].text;console.log(value, text);}e.onchange = onChange;onChange();

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

小开

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

小开

初学者可能希望使用NAME属性而不是ID属性从选择中访问值。我们知道所有表单元素都需要名称，甚至在它们获得id之前。

所以，我添加了getElementsByName()解决方案，只是为了让新开发人员也能看到。

注意。表单元素的名称需要是唯一的，以便您的表单在发布后可用，但DOM可以允许多个元素共享名称。因此，如果可以，请考虑向表单添加ID，或者显式使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y。

使用getElementsByName的示例：

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];var strUser = e.options[e.selectedIndex].value;

小开

纯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").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'}];

小开

如果您遇到纯为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 selectedValue = document.getElementById("ddlViewBy").value;

小开

只要用

$('#SelectBoxId option:selected').text();获取列出的文本

$('#SelectBoxId').val();获取选定的索引值

小开

这是在onchange函数中执行此操作的简单方法：

event.target.options[event.target.selectedIndex].dataset.name

小开

<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>

当您从元素内部访问任何输入/表单字段时，都可以使用“this”关键字。这消除了在dom树中定位表单然后在表单中定位此元素的需要。

小开

前面的答案仍然有改进的余地，因为代码的可能性、直观性以及id与name的使用。人们可以读出选定选项的三个数据——它的索引号、它的值和它的文本。这个简单的跨浏览器代码完成了所有这三个：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo GetSelectOptionData</title></head><body><form name="demoForm"><select name="demoSelect" onchange="showData()"><option value="zilch">Select:</option><option value="A">Option 1</option><option value="B">Option 2</option><option value="C">Option 3</option></select></form>
<p id="firstP">&nbsp;</p><p id="secondP">&nbsp;</p><p id="thirdP">&nbsp;</p>
<script>function showData() {var theSelect = demoForm.demoSelect;var firstP = document.getElementById('firstP');var secondP = document.getElementById('secondP');var thirdP = document.getElementById('thirdP');firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);}</script></body></html>

现场演示：http://jsbin.com/jiwena/1/edit?html，输出。

id应该用于弥补目的。出于功能表单的目的，name仍然有效，在HTML5中也是如此，应该仍然使用。最后，请注意在某些地方使用方括号和圆括号。正如前面解释的那样，只有（旧版本的）Internet Explorer才能在所有地方接受圆括号。

小开

2015年，在Firefox中，以下方法也有效。

E.选项.selected索引

小开

使用jQuery：

$('select').val();

小开

这是一个JavaScript代码行：

var x = document.form1.list.value;

假设下拉框命名为列表name="list"并包含在具有名称属性name="form1"的表单中。

小开

为了与前面的答案保持一致，这是我作为一行代码的方式。这是为了获取所选选项的实际文本。已经有很好的例子可以获取索引号。（对于文本，我只是想以这种方式显示）

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

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

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

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

不幸的是，这仍然会获取元素两次，这并不理想。一个只获取元素一次的方法会更有用，但我还没有弄清楚，关于用一行代码执行此操作。

小开

运行它如何工作的示例：

var e = document.getElementById("ddlViewBy");var val1 = e.options[e.selectedIndex].value;var txt = e.options[e.selectedIndex].text;
document.write("<br />Selected option Value: "+ val1);document.write("<br />Selected option Text: "+ txt);

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

注意：值不会随着下拉列表的更改而更改，如果您需要该功能，则将实现onClick更改。

小开

您可以使用querySelector。

例如。

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

小开

另一种解决方案是：

document.getElementById('elementId').selectedOptions[0].value

小开

有两种方法可以使用JavaScript或jQuery完成此操作。

JavaScript：

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.

或

var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected

jQuery：

$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

小开

我对如何实现这一点有一点不同的看法。我通常使用以下方法（据我所知，这是一种更简单的方法，适用于所有浏览器）：

<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>

小开

只是做：document.getElementById('idselect').options.selectedIndex

然后你会得到选择索引值，从0开始。

小开

试试看

ddlViewBy.value                      // value
ddlViewBy.selectedOptions[0].text    // label

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>

小开

您应该使用querySelector来实现这一点。这也标准化了从表单元素中获取值的方式。

var dropDownValue = document.querySelector('#ddlViewBy').value;

小提琴：https://jsfiddle.net/3t80pubr/

小开

我不知道我是不是那个没有正确回答问题的人，但这对我来说很有效：在超文本标记语言中使用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;}

这将为您提供每次点击选择下拉列表的任何价值

小开

最简单的方法是：

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>

我有点滑稽。下面是代码片段：

<select><option value="RidiculousObject">Banana Shark<option value="SuperDuperCoding">select tag and option tag!<option value="Unknown">Add more tags to add more options!</select><h1>Only 1 option (Useless)</h1><select><option value="Single">Single Option</select>

耶片段起作用了

小开

在更现代的浏览器中，querySelector允许我们使用#1伪类在一条语句中检索选定的选项。从选定的选项中，我们可以收集我们需要的任何信息：

const opt = document.querySelector('#ddlViewBy option:checked');// opt is now the selected option, soconsole.log(opt.value, 'is the selected value');console.log(opt.text, "is the selected option's text");

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

小开

我认为您可以将事件侦听器附加到选择标记本身，例如：

<script>document.addEventListener("DOMContentLoaded", (_) => {document.querySelector("select").addEventListener("change", (e) => {console.log(e.target.value);});});</script>

在这种情况下，您应该确保所有选项都有value属性，并且它们不为空。

小开

onChange回调中的event.target.value对我起了作用。

小开

<select name="test" id="test" ><option value="1" full-name="Apple">A</option><option value="2" full-name="Ball">B</option><option value="3" full-name="Cat" selected>C</option></select>
var obj  = document.getElementById('test');obj.options[obj.selectedIndex].value;  //3obj.options[obj.selectedIndex].text;   //Cobj.options[obj.selectedIndex].getAttribute('full-name'); //Catobj.options[obj.selectedIndex].selected; //true

小开

这里的大多数答案通过纯文本JavaScript选择器获得“this”选择菜单onchange的值。

例如：

document.getElementById("ddlViewBy").value;

这是没有 DRY方法。

DRY（3行代码）：

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”选择选项项（ByselectedIndex）：

e.target[e.target.options.selectedIndex].innerText;

DEMO

let log = document.getElementById('log');
function handleChange(e) {let innerText = e.target[e.target.options.selectedIndex].innerText;let value = e.target.value;  
log.innerHTML = `<table><tr><th>value</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">Goodbye innerText</option><option value="value_seeYou">See you... innerText</option></select>
<select id="other_select_menu" onchange="handleChange(event)"><option value="value_paris">Paris innerText</option><option value="value_ny">New York innerText</option></select>
<div id="log"></div>

小开

有一个解决方法，使用EasyUI框架及其所有插件。

您只需要添加一些EasyUI对象，可以从输入中读取作为“桥”到下拉菜单。

示例：easyui-search chbox

左边是下拉列表，右边是easyui-search chbox：

...<input id="ss" class="easyui-searchbox" style="width:300px"data-options="  searcher:my_function,prompt:'Enter value',menu:'#mm'"><div id="mm" style="width:200px"><div data-options="name:'1'">test1</div><div data-options="name:'2'">test2</div></div>...

...<script type="text/javascript">function my_js_function(triggeredByButton = false){// normal text of the searchbox (what you entered)var value = $("#ss").searchbox("getValue");// what you chose from the drop-down menuvar name = $("#ss").searchbox("getName");...

Mind：var name是'1'或'2'，即“下拉列表的值”，而var value是在easyui-搜索框中输入的值，如果您只想知道下拉列表的值，则不相关。

我检查了EasyUI如何获取#mm名称，如果没有EasyUI的帮助，我无法找到如何获取该名称。getName背后的jQuery：

getName:function(jq){return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");}

请注意，此函数的返回不是easyui-搜索框的值，而是用作easyui-搜索框menu参数的#mm下拉列表的名称。不知何故，EasyUI必须获得另一个值，因此它必须是可能的。

如果您不希望看到任何插件，请使其尽可能小？或者在上面的链接中找到一个根本不需要表单的插件，我只是没有花时间。