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

Posted 2023-05-07

【中文标题】使用Javascript获取下拉列表中选择的值（显示空）[重复]

【英文标题】：Get value selected in dropdown list using Javascript (displays null) [duplicate]

【发布时间】：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 即可。

【参考方案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());