JavaScript 选定值

Question

            <div id="selected_options">
            <select onchange="test()" id="selected_options">
            <option value="0" selected>-Select-</option>
            <option value="1">Communication</option>
            <option value="2">Hardware</option>
            </select>
    </div>

我写了一个选择值的函数，但是当我用alert显示所选值时，它显示为未定义。这个函数是：

      function test() {
                    var get_id = document.getElementById('selected_options');
                    var result = get_id.options[get_id.selectedIndex].value;
                    alert(result);
                      }

请问有人可以告诉我这个错误是什么吗？

- Siva

Answer 1

你还有两个带有 selected_options 的id。 正如这个 JSFiddle 弹出的那样：

<div id="selected_options">
    <select onchange="test()" id="selected_opt">
        <option value="0" selected>-Select-</option>
        <option value="1">Communication</option>
        <option value="2">Hardware</option>
    </select>
</div>

function test() {
    var get_id = document.getElementById('selected_opt');
    console.log(get_id);
    var result = get_id.options[get_id.selectedIndex].value;
    alert(result);
}

- KJYe.Name

---

+1 这是个问题，我也想到了同样的事情 http://jsfiddle.net/loktar/qDTdn/ 你只是比我先做了 :P - Loktar

@Siva，你的DOM上还有另一个id='selected_options'吗？ - KJYe.Name

Answer 2

错误出现在这里：

get_id.options[get_id.selectedIndex].value;

应该是这样的

get_id.value

它将显示所选的值 :)

- dLobatog

Answer 3

get_id[get_id.selectedIndex].value; "options" 不是必需的。

- Diodeus - James MacFarlane

Answer 4

要获取当前选定的值，您可以执行以下操作：

function test() {
    var get_id = document.getElementById('selected_options');
    var result = get_id.value;
    alert(result);
}

- Dai

Answer 5

使用jQuery更加容易：

var result = $('#selected_options option:selected').val();

并且只使用一次id

- felixsigl

Answer 6

你代码中的问题是在div和combobox中都使用了相同的id=>'selected_options'。

id用于页面上唯一元素的表示。

你可以在这里查看它的实时示例：
http://outsourcingnepal.com/projects/kool.htm

代码：

<script>
function test() {
        var get_id = document.getElementById('selected_options');
    var result = get_id.options[get_id.selectedIndex].value;
    alert(result);
}
</script>
<h1>Outsourcing Nepal</h1>
<a href="http://www.outsourcingnepal.com">Home</a>
<div id="selected_options1">
    <select onchange="test()" id="selected_options">
            <option value="0" selected>-Select-</option>
            <option value="1">Communication</option>
            <option value="2">Hardware</option>
    </select>
</div>

- KoolKabin

Answer 7

可能是因为您的 div 和 select 标签具有相同的 id。

- JWC

---

不，那不是问题，即使我更改了它，它仍然显示为未定义。 - Siva