开发者问题收集

无法使用 JavaScript 获取下拉框中选定的值

2012-08-07
10402
javascript html

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

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

<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>
3个回答
document.getElementById("a_drop_down_box");

您是否注意到您尚未为选择项定义 id？

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

或者，如果您的选择位于表单内，您可以使用以下内容： 

document.getElementById("myForm").elements["a_drop_down_box"];
Torsten Walter
2012-08-07

您忘记为 <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>
kzh
2012-08-07

下拉菜单的 name 属性是“a_drop_down_box” - 您调用它时以为这是它的 id 。

任何时候您收到“...of undefined”错误，都意味着您认为正在处理的对象（或元素，在您的情况下）尚未找到。因此，在想知道错误发生的原因之前，请务必确认这一点。就您而言，您可以这样做： 

alert(test); //undefined - no element found with that ID
Mitya
2012-08-07