如何使用jQuery在选择框上设置第一个选项？

Question

我有两个HTML select框.select当我在另一个选项中进行选择时,我需要重置一个框.

<select id="name" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" >
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

当我选择第一个select(即id="name")的选项时,我需要将第二个重置select为select all; 类似地,当我选择第二个select(即id="name2")的选项时,我需要将第一个重置select为select all.

我怎样才能做到这一点？

Answer 1

像这样的东西应该做的伎俩:https://jsfiddle.net/TmJCE/898/

$('#name2').change(function(){
    $('#name').prop('selectedIndex',0);
});


$('#name').change(function(){
    $('#name2').prop('selectedIndex',0);
});

Answer 2

如果您只想将select元素重置为它的第一个位置,最简单的方法可能是:

$('#name2').val('');

要重置文档中的所有选择元素:

$('select').val('')

编辑:要根据下面的注释澄清,这会将select元素重置为其第一个空白条目,并且仅当列表中存在空白条目时才会重置.

Answer 3

正如@PierredeLESPINAY在评论中指出的那样,我的原始解决方案是错误的 - 它会将下拉列表重置为最顶层的选项,但仅仅因为undefined返回值已解析为索引0.

这是一个正确的解决方案,它考虑了selected财产:

$('#name').change(function(){
    $('#name2').val(function () {
        return $(this).find('option').filter(function () {
            return $(this).prop('defaultSelected');
        }).val();
    });
});

演示:http://jsfiddle.net/weg82/257/

原始答案 - 不正确

在jQuery 1.6+中,您需要使用该.prop方法来获取默认选择:

// Resets the name2 dropdown to its default value
$('#name2').val( $('#name2').prop('defaultSelected') );

要在第一个下拉列表更改时动态重置,请使用以下.change事件:

$('#name').change(function(){
  $('#name2').val( $('#name2').prop('defaultSelected') );
});

Answer 4

如果要将select重置为具有"selected"属性的选项,请使用此选项.类似于form.reset()内置的javascript函数到select.

 $("#name").val($("#name option[selected]").val());