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();
    });
});

DEMO: http://jsfiddle.net/weg82/257/

原始答案 - INCORRECT

在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

如果要将选择重置为具有＆＃34;选择＆＃34;的选项，请使用此选项。属性。类似于form.reset（）内置的javascript函数到select。

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

Answer 5

如果您只想将其恢复到第一个选项，请按以下步骤操作：＆＃34;选择一个选项＆＃34; ＆＃34; Select_id_wrap＆＃34;显然是选择的div，但我只是想清楚地说明它是否与它的工作原理有关。 Mine重置为点击功能，但我确信它也可以在改变中使用...

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

Answer 6

这对我有很大帮助。

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

也可以使用

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


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

Answer 10

以下是如何使用定义为默认值的随机选项元素来处理它（在这种情况下，文本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>

Answer 11

我在jQuery v1.9.1的@Jens Roland的回答中使用defaultSelected属性时遇到了问题。更通用的方法（具有许多依赖选择）将在依赖选择中放置数据默认属性，然后在重置时迭代它们。

<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/了解上述工作版本。

Answer 12

我在select标记中创建了一个新选项，其值为空字符串（＆＃34;＆＃34;）并使用：

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

Answer 13

你可以试试这个：

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

Answer 14

使用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;
    }
});

Answer 15

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

<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>

Answer 16

这是我使用的最佳解决方案。这将适用于超过1个选择框

＆＃13;

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

＆＃13;

Answer 17

选择元素中的设置选项1可以通过此段完成。要直观地显示它，请在最后添加.trigger（'change'）。

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

Answer 18

很简单：

$('#DropdownToRestId').find('option:selected').val('');

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

18 个答案: