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

Question

在该线程中，描述了如何使用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>

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 name它。

每当您收到“ ...未定义”错误时，就意味着找不到您认为正在使用的对象（或元素，在您的情况下）。 因此，在怀疑为什么会发生错误之前，请务必进行确认。 就您而言，您可以做到：

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

解决方案1
3 已采纳 2012-08-07 11:18:09

解决方案2
1 2012-08-07 11:17:51

解决方案3
1 2012-08-07 11:17:52

解决方案4
1 2012-08-07 11:31:34

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

问题描述

4 个解决方案

解决方案1 3 已采纳 2012-08-07 11:18:09

解决方案2 1 2012-08-07 11:17:51

解决方案3 1 2012-08-07 11:17:52

解决方案4 1 2012-08-07 11:31:34

解决方案1
3 已采纳 2012-08-07 11:18:09

解决方案2
1 2012-08-07 11:17:51

解决方案3
1 2012-08-07 11:17:52

解决方案4
1 2012-08-07 11:31:34