设置选择元素的选定值

Set the selected value of a select element

本文关键字：选择 元素 设置      更新时间：2023-09-26

我有两个选择列表：

<select id="one" class="sel">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
</select>
<select id="two" class="sel">
    <option id="1">1</option>
    <option id="2">2</option>
    <option id="3">3</option>
</select>

和跨度：

<span id="three">set three</span>

我想点击这个跨度，应该在两个列表中选择（id一和二）选项id＝3。我该怎么做？

$("#three").click(function(){
    $(".sel") ... ????
})

现场直播：http://jsfiddle.net/rUbGx/

顺便说一句。我想要一个在选项中有ID的例子，而不是有值的例子。谢谢

在option s中将id更改为value，然后：

$("#three").click(function(){
    $(".sel").val(3);
});

另请参阅您更新的示例。

您可以使用属性选择器。

$("#three").click(function(){
    $(".sel").find('[id=3]').attr('selected', 'selected');
});

工作演示

使用val函数。

$("#three").click(function(){
    $(".sel").val("3");
})

每个认为你需要在option上设置值的人：你没有。看看jQuery核心：

option: {
            get: function( elem ) {
                var val = elem.attributes.value;
                return !val || val.specified ? elem.value : elem.text;
            }
        },

如果没有值属性，则使用option的文本。因此，调用val(3)将搜索文本值为"3"的选项，并选择适当的元素。ID不是唯一的这一点无关紧要。

小提琴：http://jsfiddle.net/Qrbs2/

$("#three").click(function(){
    $(".sel").prop( "selectedIndex", 2 );
})

http://jsfiddle.net/rUbGx/3/

做这个只是为了好玩。。查看我的演示此处

var txt2Num = ['zero', 'one', 'two', 'three', 'four', 'five','six', 'seven', 'eight', 'nine'];
$("#three").click(function(){
    var textNum = $.trim($(this).text()).replace('set ', '');
    var selectedIndex = $.inArray(textNum, txt2Num);   
    $(".sel").each (function (index) {       
        this.selectedIndex = selectedIndex - 1;
    });
});
相关文章：