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

时间:2013-02-14 17:13:22

标签: jquery html select

我有一个非常简单的问题,但我无法弄清楚如何做到这一点...... 在我的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”保留。事实上,我想改变整个选择,例如选定的选项而不仅仅是索引。

3 个答案:

答案 0 :(得分:1)

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

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

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

修改

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

答案 1 :(得分:1)

你试过了吗?

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

答案 2 :(得分:0)

最后,我找到了一种方法让它发挥作用。我仍然使用我的第一个方法,但我在$(document).ready:

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

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