Question

在this thread中，介绍了如何使用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>

Answer 1

document.getElementById("a_drop_down_box");

您是否注意到您没有为选择项定义ID？

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

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

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

Answer 2

您忘记提供<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>

Answer 3

下拉菜单的name属性为“a_drop_down_box” - 您将其称为id。

任何时候你得到一个'...未定义'的错误，这意味着你认为你正在处理的对象（或你的情况下的元素）还没有找到。因此，在想知道错误发生的原因之前，请务必确认一下。在你的情况下，你可以做到：

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

Answer 4

您忘记将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/

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

4 个答案: