使用 Javascript 获取在下拉列表中选择的值（显示为空）

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

您必须指定 select 个元素的 id

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

Answer 2

请更改您的 HTML 元素属性。

您提到 'mySelect' 作为 class 并且在 JS 中，您使用 ID 引用来调用它。

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

笨蛋：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，所以我用 class 名字试试..

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

使用 Javascript 获取在下拉列表中选择的值（显示为空）

Get value selected in dropdown list using Javascript (displays null)

html

javascript

select

getelementbyid

drop-down-menu