Question

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

我尝试了下面的方法，但它们都返回了所选的索引而不是值：

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

Answer 1

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

Answer 2

普通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'
}];

Answer 3

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

这是正确的，应该给你价值。这是你要写的文字吗？

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

所以你对术语很清楚：

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

此选项包含：

指数= 0
Value = hello
Text = Hello World

Answer 4

以下代码展示了与使用JavaScript从输入/选择字段获取/放置值相关的各种示例。

<强> Source Link

工作Demo

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

Answer 5

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

Answer 6

如果您遇到纯粹为IE编写的代码，您可能会看到：

var e = document.getElementById("ddlViewBy"); 
var strUser = e.options(e.selectedIndex).value;

在Firefox等运行上面的内容会给你一个'不是函数'错误，因为IE允许你使用（）而不是[]来逃避：

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

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

Answer 7

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

Answer 8

只需使用

$('#SelectBoxId option:selected').text();用于获取列出的文字
$('#SelectBoxId').val();获取所选索引值

Answer 9

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

所以，我正在为新开发人员添加getElementByName()解决方案。

NB。表单元素的名称必须是唯一的，表单一旦发布就可以使用，但DOM可以允许名称由多个元素共享。因此，如果可以，请考虑向表单添加ID，或者明确表单元素名称my_nth_select_named_x和my_nth_text_input_named_y。

使用getElementByName的示例：

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

Answer 10

由于可能性，代码的直观性以及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,output。

id应该用于化妆目的。出于功能表单的目的，name仍然有效，也在HTML5中，并且仍应使用。最后，请注意在某些地方使用方括号与圆括号。如前所述，只有（旧版本）IE会在所有地方接受圆形。

Answer 11

使用jQuery：

$(‘select’).val();

Answer 12

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

JavaScript：

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

OR

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'

Answer 13

您可以使用querySelector。

<强> E.g。

var myElement = document.getElementById('ddlViewBy');

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

Answer 14

最简单的方法是：

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

Answer 15

运行示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 16

与上述答案一致，这就是我作为一个单行的方式。这是为了获取所选选项的实际文本。已经有很好的例子来获取索引号。（对于文本，我只想表明这种方式）

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

在极少数情况下，您可能需要使用括号，但这种情况非常罕见。

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

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

如果有人知道如何在一行中完成这一操作而不必两次获得该元素，我很乐意为您发表评论并告诉我如何操作。我还没弄清楚......

Answer 17

另一个解决方案是：

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

Answer 18

2015年，在Firefox中，以下内容也有效。

例如选项 .selectedIndex

Answer 19

这是一个JavaScript代码行：

var x = document.form1.list.value;

假设名为list name="list"的下拉菜单包含在名称属性为name="form1"的表单中。

Answer 20

对于如何实现这一点，我有一些不同的看法。我通常使用以下方法进行此操作：（据我所知，这是一种更简单的方法，并且可以与每种浏览器一起使用。）

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

Answer 21

只需执行：document.getElementById('idselect').options.selectedIndex

然后，您将获得从0开始的选择索引值。

Answer 22

我不知道我是否是一个没有解决问题的人，但这对我有用：在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 sele(){
    var strUser = numberToSelect.value;
}

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

Answer 23

我能看到这个代码不起作用的唯一原因是如果你使用的是IE7-，而忘了为你的<option> - 标签指定值属性...其他所有浏览器都应该转换里面的内容打开 - 关闭标签作为选项值。

Answer 24

在更现代的浏览器中，querySelector允许我们使用:checked pseudo-class在一条语句中检索选定的选项。从选定的选项中，我们可以收集所需的任何信息：

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.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>

Answer 25

onChange 回调中的

event.target.value 对我有用。

Answer 26

您可以仅使用selectElement.value来获取select的所选选项的值。

document.getElementById("idOfSelect").value;

var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.value;
});

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>

Answer 27

尝试

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>

Answer 28

制作一个包含多个选项的下拉菜单（任意数量！）

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

该代码段有效

Answer 29

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

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

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

Answer 30

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

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

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

30 个答案: