Question

<select id="comboBox">
    <option id="1">One</option>
    <option id="2">Two</option>
    <option id="3">Three</option>
    <option id="4">Four</option>
</select>

我想选择ID为3的选项。有没有办法在没有循环的情况下怎么做？我期待这样的事情

$("#comboBox").val("3");

但是使用ID而不是值。（所以我的意思是作为comboBox的成员访问该选项，而不是通过像document.getElementById('3');）

这样的选择器

Answer 1

<script type="text/javascript">
    document.getElementById("3").selected=true;
</script>

或

<script type="text/javascript">
    document.getElementById("comboBox").options[2].selected=true;
</script>

或

<script type="text/javascript">
    document.getElementById("comboBox").selectedIndex=2;
</script>

或

<script type="text/javascript">
    document.getElementById("comboBox").options.namedItem("3").selected=true;
</script>

对于最后一个，请参阅https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement#namedItem()和 http://www.w3schools.com/jsref/coll_select_options.asp

您可以跳过对较短document.getElementById("comboBox").namedItem("3").selected=true;

的选项的引用

Answer 2

尝试document.querySelector('option[id="3"]').setAttribute('selected', true)或 document.querySelector('#comboBox > option[id="3"]').selected=true

JsFiddle

Answer 3

这对我有用：

$("#2").attr({"selected": true});

注意我正在使用JQuery选择器和.attr函数。

Answer 4

如果您的ID名称相同，则可以尝试此操作

document.getElementById("comboBox").selectedIndex = 2;

Demo

Answer 5

selectedIndex是HTMLSelectElement的属性，您可以使用index属性获取其索引，因此您可以执行以下操作：

document.getElementById("comboBox").selectedIndex = document.getElementById('3').index;

已更新： Demo

按钮点击事件更新选项： New Demo

按降序排列按钮点击事件的选项： Another Demo

如何通过ID设置select元素的选定选项？

5 个答案: