Question

我有一个非常简单的问题，但我无法弄清楚如何做到这一点...... 在我的HTML页面中，我有一个简单的选择标记：

<select id="selection-type">
     <option disabled="disabled">Type</option>
     <option value="0">Tous les types</option>
     <option value="1">Appartement</option> 
     <option value="2">Maison</option>
     <option value="3">Terrain</option>
</select>

我想使用JavaScript动态设置一个特定的值，但我只是设法更改了所选的索引，而不是显示的值。目前，我正在这样做（在我的HTML页面的页脚部分）：

<script type="text/javascript">
  $(document).ready(function(){
    document.getElementById("selection-type").selectedIndex = 2;
});
</script>

在结果中，它改变了我选择的所选索引，但显示的文本不是“更新”：值“Tous les types”保留。事实上，我想改变整个选择，例如选定的选项而不仅仅是索引。

Answer 1

看起来你正在使用jQuery。您可以使用jQuery的val方法更改选择框，使用您要选择的选项的value：

$(document).ready(function() {
    $('#selection-type').val('1');
});

或者您是否需要在纯JavaScript中完成它？

修改

您使用的浏览器是什么？您正在执行的selectedIndex事实在Chrome 24.0.1312.5中适用于我。

Answer 2

你试过了吗？

document.getElementById("selection-type").value = document.getElementById("selection-type").selectedIndex.value;

Answer 3

最后，我找到了一种方法让它发挥作用。我仍然使用我的第一个方法，但我在$（document）.ready：

之前执行它

<script type="text/javascript">
    document.getElementById("selection-type").selectedIndex = 2;
    $(document).ready(function() {
        ...
     });
</script>

我不明白为什么......但这是有效的。非常感谢。

如何使用JavaScript更改选择的选项？

3 个答案: