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

我有两个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。

我怎样才能做到这一点？

这样的事情应该可以解决问题：https：//jsfiddle.net/TmJCE/898/

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


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

如果您只想将select元素重置为其第一位置，则最简单的方法可能是：

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

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

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

编辑：根据下面的注释进行澄清，仅当列表中存在空白条目时，这会将select元素重置为其第一个空白条目。

正如@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') );
});

如果要将选择重置为具有“已选择”属性的选项，请使用此选项。与select内置的form.reset（）内置javascript函数类似。

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

这对我有很大帮助。

$(yourSelector).find('select option:eq(0)').prop('selected', true);

如果您只是想将其恢复到第一个选项，例如，“选择一个选项”“ Select_id_wrap”显然是围绕select的div，那么这就是我的工作方式，但是我只是想弄清楚这一点，以防万一有关其工作原理的任何信息。我的重置为单击功能，但我确定它也可以在更改时使用...

$("#select_id_wrap").find("select option").prop("selected", false);

使用下面的代码。看到它在这里工作http://jsfiddle.net/usmanhalalit/3HPz4/

 $(function(){
     $('#name').change(function(){
         $('#name2 option[value=""]').attr('selected','selected');
     });

     $('#name2').change(function(){
         $('#name option[value=""]').attr('selected','selected');
     });
 });

也可以使用

$('#name2').change(function(){
    $('#name').val('');//You can set the first value of first one if that is not empty
});


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

这是重置表单中所有选择框的最灵活/可重复使用的方法。

      var $form = $('form') // Replace with your form selector
      $('select', $form).each(function() {
        $(this).val($(this).prop('defaultSelected'));
      });

以下是使用随机选项元素定义为默认值（在这种情况下，文本2为默认值）来处理它的方法：

<select id="name2" >
   <option value="">select all</option>
   <option value="1">Text 1</option>
   <option value="2" selected="selected">Text 2</option>
   <option value="3">Text 3</option>
</select>
<script>
    $('#name2 option[selected]').prop('selected', true);
</script>

您可以尝试以下方法：

$( 'select' ).each( function () {
    if ( $( this ).children().length > 0 ) {
        $( $( this ).children()[0] ).attr( 'selected', 'selected' );
        $( this ).change();
    }
} );

我在jQuery v1.9.1中@Jens Roland的答案中使用defaultSelected属性时遇到问题。一种更通用的方式（具有许多从属选择）是将data-default属性放入从属选择中，然后在重置时对其进行迭代。

<select id="name0" >
    <option value="">reset</option>
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name1" class="name" data-default="1">
    <option value="">select all</option>
    <option value="1" selected="true">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3">Text 3</option>
</select>

<select id="name2" class="name" data-default="2">
    <option value="">select all</option>
    <option value="1">Text 1</option>
    <option value="2" selected="true">Text 2</option>
    <option value="3">Text 3</option>
</select>

还有javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

有关上述内容的有效版本，请参见http://jsfiddle.net/8hvqN/。

我在select标记中创建了一个新选项，该选项的值为空字符串（“”），并使用了：

$("form.query").find('select#topic').val("");

使用jquery绑定onchange事件进行选择，但是您无需创建另一个$(this)jquery对象。

$('select[name=name2]').change(function(){
    if (this.value) {
        console.log('option value = ', this.value);
        console.log('option text  = ', this.options[this.selectedIndex].text);

        // Reset selected
        this.selectedIndex = this.defaultSelected;
    }
});

使用此代码将所有选择字段重置为默认选项，该默认选项定义了所选的属性。

<select id="name1" >
    <option value="1">Text 1</option>
    <option value="2" selected="selected" >Default Text 2</option>
    <option value="3">Text 3</option>
</select>
<select id="name2" >
    <option value="1">Text 1</option>
    <option value="2">Text 2</option>
    <option value="3" selected="selected" >Default Text 3</option>
</select>
<script>
    $('select').each( function() {
        $(this).val( $(this).find("option[selected]").val() );
    });
</script>

这是即时通讯使用的最佳解决方案。这将适用于超过1个slectbox

$("select").change(function(){
    var thisval = $(this).val();
    $("select").prop('selectedIndex',0);
    $(this).val(thisval);
})

可以通过此段完成在select元素中设置选项1的操作。为了直观地显示它，您必须在最后添加.trigger（'change'）。

$('#name').removeAttr('selected').find('option:first').attr('selected', 'selected').trigger("change");