使用Javascript获取下拉列表中选择的值（显示空）[重复]答案

【问题标题】：Get value selected in dropdown list using Javascript (displays null) [duplicate]使用Javascript获取下拉列表中选择的值（显示空）[重复]
【发布时间】：2016-10-14 17:39:31
【问题描述】：

我需要使用 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 行根本不运行。

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

【问题讨论】：

如果 getElementById 返回 null 表示它没有找到该元素。
您正在尝试访问 ID 为“mySelect”的元素，但您在 HTML 中将“mySelect”作为一个类而不是一个 ID。
@SpeedyNinja——不，简单的编码错误。
另外，使用 console.log 而不是 alert 来享受更好的开发者体验。
感谢所有快速回复的家伙。我的错，在这个项目上工作了几个小时，甚至简单的事情似乎都被隐藏了。将其更改为 ID 即可。

标签： javascript html select drop-down-menu getelementbyid

【解决方案1】：

请更改您的 HTML 元素属性。

您提到了“mySelect”作为类，在 JS 中，您使用 ID 引用来调用它。

【讨论】：

【解决方案2】：

您必须指定选择元素的id

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

【讨论】：

【解决方案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>

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

谢谢...

【讨论】：

【解决方案4】：

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

【讨论】：

能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？

【解决方案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());
}

【讨论】：

【解决方案6】：

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

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

【讨论】：