无法使用 JavaScript 在下拉框中获取所选值

Cannot fetch the selected value in a drop down box using JavaScript

本文关键字：获取 JavaScript      更新时间：2023-09-26

在这个线程中，描述了如何使用JavaScript从下拉框中获取所选值。我一直在尝试按照该线程中的说明进行操作，但无法使其正常工作。

这是我正在尝试做的一个最小（非工作）示例。代码应该从下拉框中打印第二个选项的值，但我在第 11 行的 Chrome JavaScript 控制台Uncaught TypeError: Cannot read property 'options' of null中收到以下错误（即，当我定义第二个变量时）。

<html>
  <body>
    <select name='a_drop_down_box'>
        <option value='1'>One</option>
        <option value='2' selected='selected'>Two</option>
        <option value='3'>Three</option>
    </select>
    <p id='message'></p>
    <script type="text/javascript">
        var test = document.getElementById("a_drop_down_box");
        var testValue = test.options[test.selectedIndex].value;
        document.getElementById('message').innerHTML=testValue;
    </script>
  </body>
</html>

document.getElementById("a_drop_down_box");

您是否注意到尚未为所选项目定义 ID？

name 属性用于标识使用该表单发送的请求的表单元素。您应该使用 id 从 dom 中检索它。

或者，如果您的选择驻留在表单中，则可以使用以下命令：

document.getElementById("myForm").elements["a_drop_down_box"];

你忘了给你的<select>一个id属性。

<html>
  <body>
    <select id='a_drop_down_box' name='a_drop_down_box'>
        <option value='1'>One</option>
        <option value='2' selected='selected'>Two</option>
        <option value='3'>Three</option>
    </select>
    <p id='message'></p>
    <script type="text/javascript">
        var test = document.getElementById("a_drop_down_box");
        var testValue = test.options[test.selectedIndex].value;
        document.getElementById('message').innerHTML=testValue;
    </script>
  </body>
</html>
下拉列表

的name属性是"a_drop_down_box" - 您认为这是它的id

。

任何时候你得到一个"...未定义"错误表示您认为正在处理的对象（或元素，在您的情况下）尚未找到。因此，在想知道为什么会发生错误之前，请务必确认这一点。在您的情况下，您可以完成：

alert(test); //undefined - no element found with that ID

您忘记将 id 添加到选择标签

var e = document.getElementById("a_drop_down_box");
var strUser = e.options[e.selectedIndex].value;

将返回 2。如果你想要Two，那么这样做：

var e = document.getElementById("a_drop_down_box");
var strUser = e.options[e.selectedIndex].text;

这是一个简单的例子http://jsfiddle.net/VCerV/3/

相关文章：