Question

出于某种原因，我很难在选择下拉列表中使用选项的值。这是代码：

<select id="select_category" name="select_category">
  <option value=""></option>
  <option value="home">Home</option>
  <option value="office">Office</option>
  <option value="dinning_room">Dinning Room</option>
</select>

<script>
var select_category = document.getElementById("select_category");
select_category.options["home"].selected = true;
</script>

当我运行此操作时，我收到错误＆＃34;无法设置＆＃39;已选择＆＃39;未定义的。如果我在最后一行用[2]替换[＆＃34; home＆＃34;]它可以工作。为什么我不能通过我分配给它的值来引用该选项？

由于

编辑 - 按照建议，将javascript更改为以下内容，但现在我收到错误＆＃34;令牌ILLEGAL＆＃34;

document.getElementById('select_category').value = 'home';

Answer 1

document.getElementById('select_category').value = 'home';

jsFiddle Demo

Answer 2

select_category.options["home"].selected = true;

此行无效，因为选项需要索引（即您在上面发现的数字）。

http://www.w3schools.com/jsref/coll_select_options.asp

为每个选项命名并使用：

select_category.options.namedItem("nameGoesHere").selected = true;

或者，您可以为每个选项指定一个ID并使用：

document.getElementById("home").selected = true;

（假设在这种情况下选项的ID为“home”。

Answer 3

试试这个：

document.getElementById("select_category").options[1].selected = true;

如果您想通过值设置它，请使用：

document.getElementById('select_category').value = 'home';

Answer 4

因为options是一个数组。你可以编写这样的函数：

function selectOptionByValue (select, value) {
    for ( var i = 0; i < select.options.length; i++ ) {
        select.options[i].selected = select.options[i].value === value;
    }
}

如何使用JS从选择下拉列表中选择和选项

4 个答案: