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

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

<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>

当前回答

有两种方法可以使用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'

2018-07-23 13:18:45

其他回答

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

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

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

2020-07-20 20:06:03

给定如下所示的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 value = e.value;
var text = e.options[e.selectedIndex].text;

结果如下：

value == 2
text == "test2"

交互示例：

var e=document.getElementById（“ddlViewBy”）；函数onChange（）{var值=e.value；var text=e.options[e.selectedIndex].text；console.log（值，文本）；}e.onchange=onchange；onChange（）；<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>

2009-07-06 07:29:43

由于代码的可能性、直观性以及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应用于化妆。出于函数形式的目的，名称仍然有效，在HTML5中也是如此，应该仍然使用。最后，请注意在某些地方使用方括号和圆括号。正如前面所解释的，只有（旧版本的）Internet Explorer在所有地方都接受圆形。

2015-05-22 02:42:35

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

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

2018-10-12 11:39:03

按照前面的回答，这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。（对于文本，我只是想展示一下）

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

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

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

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

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

2017-05-12 16:25:32

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

推荐文章

最新文章

标签