Question

如何使用JavaScript从下拉列表中获取所选值？我尝试过以下但是没有用。

var sel = document.getElementById('select1');
var sv = sel.options[sel.selectedIndex].value;
alert(sv);

Answer 1

这对我很好。

我有以下HTML：

<div>
    <select id="select1">
        <option value="1">test1</option>
        <option value="2" selected="selected">test2</option>
        <option value="3">test3</option>
    </select>
    <br/>
    <button onClick="GetSelectedItem('select1');">Get Selected Item</button>
</div>

以下JavaScript：

function GetSelectedItem(el)
{
    var e = document.getElementById(el);
    var strSel = "The Value is: " + e.options[e.selectedIndex].value + " and text is: " + e.options[e.selectedIndex].text;
    alert(strSel);
}

请参阅您使用的是正确的ID。 如果您在ASP.NET中使用它，则在呈现时ID会更改。

Answer 2

直接value应该可以正常工作：

var sv = sel.value;
alert(sv);

代码可能失败的唯一原因是当没有选择项时，selectedIndex返回-1并且代码中断。

Answer 3

希望它能为你效劳

 function GetSelectedItem()
 {
     var index = document.getElementById(select1).selectedIndex;

     alert("value =" + document.getElementById(select1).value); // show selected value
     alert("text =" + document.getElementById(select1).options[index].text); // show selected text 
 }

Answer 4

这是一个简单的示例，用于在javascript

中获取所选的下拉列表值

首先我们设计下拉菜单的用户界面

<div class="col-xs-12">
<select class="form-control" id="language">
    <option>---SELECT---</option>
    <option>JAVA</option>
    <option>C</option>
    <option>C++</option>
    <option>PERL</option>
</select>

接下来我们需要编写脚本来获取所选项目

<script type="text/javascript">
$(document).ready(function () {
    $('#language').change(function () {
        var doc = document.getElementById("language");
        alert("You selected " + doc.options[doc.selectedIndex].value);
    });
});

现在更改下拉列表时，所选项目将处于警报状态。

Answer 5

我会说改变var sv = sel.options [sel.selectedIndex] .value; to var sv = sel.options [sel.selectedIndex] .text;

它对我有用。引导您到我找到解决方案的地方 Getting the selected value dropdown jstl

Answer 6

根据Html5规范你应该使用 - element.options [e.selectedIndex]。的文本 的

e.g。如果你有如下所示的选择框：

<select id="selectbox1"> <option value="1">First</option> <option value="2" selected="selected">Second</option> <option value="3">Third</option> </select> <br/> <button onClick="GetItemValue('selectbox1');">Get Item</button>

您可以使用以下脚本获取价值：

<script> function GetItemValue(q) { var e = document.getElementById(q); var selValue = e.options[e.selectedIndex].text ; alert("Selected Value: "+selValue); } </script>

尝试并测试过。

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

6 个答案: