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

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

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

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

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

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

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

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

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

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

<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树中定位表单，然后在表单中定位此元素。

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

因此，我getElementByName()只为新开发人员添加了该解决方案。

注意 表单元素的名称将必须唯一，以便表单一旦发布就可以使用，但是DOM可以允许一个以上的元素共享一个名称。因此，请考虑向表单添加ID（如果可以），或者使用表单元素名称my_nth_select_named_x和明确指定ID my_nth_text_input_named_y。

使用示例getElementByName：

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].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'

只需使用

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

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

由于可能，代码的直观性以及对idvs 的使用，先前的答案仍然留有改进的余地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中仍然有效，并且仍应使用。最后，请注意在某些地方使用方括号或圆括号。如前所述，只有Internet Explorer（旧版本）将在所有位置接受圆形。

使用jQuery：

$('select').val();

另一个解决方案是：

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

运行示例：

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;

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

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

在2015年的Firefox中，以下功能也适用。

e。选项 .selectedIndex

与先前的答案一起，这就是我作为单线工作的方式。这是为了获取所选选项的实际文本。有一些很好的例子来获取索引号。（对于文字，我只是想显示这种方式）

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

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

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

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

不幸的是，这仍然两次获取元素，这是不理想的。仅用一次代码捕获一次元素的方法会更有用，但是对于用一行代码完成此操作，我还没有弄清楚。

这是一个JavaScript代码行：

var x = document.form1.list.value;

假设下拉菜单名为list，name="list"并且包含在具有name属性的表单中name="form1"。

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

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

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

我不知道我是否是没有正确回答问题的人，但这对我有用：例如，在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;
}

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

最简单的方法是：

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

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

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

做就是了： 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>

制作带有多个选项的下拉菜单（任意数量！）

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

是的，这段代码奏效了