Question

我需要使用Javascript访问从下拉列表中选择的值。但是每次选择列表项时我都会得到'null'作为答案。

我的HTML页面：

<select class="mySelect">
    <option value="st1" selected="selected">Create new Stream</option>
    <option value="st1">Stream 1</option>
    <option value="st2">Stream 2</option>
    <option value="st3">Stream 3</option>
    <option value="st4">Stream 4</option>
</select>

<input type="button" value="show attributes" class="panel-button-attr" onclick="choice()">

单击上面的按钮时，应该向用户发出所选值。所以在我的Javascript函数中：

function choice() {

    var choice=document.getElementById("mySelect");
    alert(choice);
    var strUser = choice.options[choice.selectedIndex].text;
    alert(strUser.toString());

}

在这里，我尝试使用第一个警报来检查是否正确识别了任何选定的列表项。但是，此时，它显示为null，并且strUsr行根本不运行。

我知道这实际上是一项微不足道的任务，但我发现很难弄清楚这种不一致。

Answer 1

请更改您的HTML元素属性。

您已经提到过mySelect＆＃39;作为类，在JS中，您使用ID引用来调用它。

Answer 2

您必须指定选择元素的id

<select class="mySelect" id="mySelect">

Answer 3

按照代码：

你需要为下拉列表提供id，因为你试图通过id获取数据......

<select id="mySelect" class="mySelect">
   <option value="st1" selected="selected">Create new Stream</option>
   <option value="st1">Stream 1</option>
   <option value="st2">Stream 2</option>
   <option value="st3">Stream 3</option>
   <option value="st4">Stream 4</option>
</select>

我希望这能解决你的问题......

...谢谢

Answer 4

var str = "";
$( "select option:selected" ).each(function() {
  str += $( this ).text() + " ";
});

Answer 5

plunker：https://plnkr.co/edit/Q7yyVvUTaLYvPaDW5j7G?p=preview

    <select id="mySelect" class="mySelect" >
      <option value="st1" selected="selected">Create new Stream</option>
      <option value="st1">Stream 1</option>
      <option value="st2">Stream 2</option>
      <option value="st3">Stream 3</option>
      <option value="st4">Stream 4</option>
    </select>


function choice() {

    var choice=document.getElementById("mySelect");
    alert(choice.value);  // get value
    var strUser = choice.options[choice.selectedIndex].text;
    alert(strUser.toString());
}

Answer 6

你的html中没有id，所以我按类名尝试..

function choice() {
    var choice=document.getElementsByClassName("mySelect");
    var strUser = choice[0].options[choice[0].selectedIndex].text;
    alert(strUser.toString());            
}

使用Javascript在下拉列表中选择值（显示为null）

6 个答案: