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

【问题标题】：How to set the first option on a select box using jQuery?如何使用 jQuery 在选择框上设置第一个选项？
【发布时间】：2011-09-16 13:34:39
【问题描述】：

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

我该怎么做？

【问题讨论】：

我把标题从 [...]reset[...] 改为 [...]set the first option on[...] 因为 reset 意味着设置默认的初始加载值

标签： javascript jquery

【解决方案1】：

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

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


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

【讨论】：

是的，但它仍然显示了基本概念，在这种情况下，他似乎想将其重置为“全选”，这是第一个选项。
如果您从<button> 元素中使用它，请确保不要设置type="reset"。在我将类型设置为 button 之前，它对我不起作用
我确实选择了下拉列表的第一个元素，但文本仍然是旧的。
我将它用作选择框的其余部分，可以吗？还是我没有正确理解？
@ankitsuthar 它将select 的选定选项更改为提供的值。 select.prop('selectedIndex', 0) 将其重置为第一个选项，select.prop('selectedIndex', 1) 将其设置为第二个选项。

【解决方案2】：

如果你只是想将选择元素重置到它的第一个位置，最简单的方法可能是：

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

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

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

编辑：为了澄清下面的评论，这会将选择元素重置为其第一个空白条目，并且仅当列表中存在空白条目时。

【讨论】：

是的，这几乎可以一直工作。其他解决方案有时可能会出现问题。确实是最简单的方法。
只是一个警告：这仅在您确实希望选择第一个选项并且第一个选项的值集为空白时才有效。如果您的第一个选项具有其他值，或者如果 SELECT 框中没有选项具有空白值，则这不会影响任何更改。或者，如果其他选项的值为空白，它将选择该选项。
@HBlackorby，您的评论很有帮助，但是 1) value="" 的选项可以按任何顺序出现。 2) 没有值属性的选项即<option></option>与具有空字符串值属性的选项即<option value=""></option>不同，您明确表示我们需要value=""@ 987654321@ 3) 即使没有空字符串值的<option>；设置.val('') 将“影响更改”，选择将出现更改为空白，不是吗？ At least in my Chrome...

【解决方案3】：

正如@PierredeLESPINAY 在 cmets 中指出的那样，我最初的解决方案是不正确的 - 它会将下拉菜单重置为最顶部的选项，但这仅仅是因为 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/

原始答案 - 不正确

在 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') );
});

【讨论】：

Jens Roland 所说的，反之亦然 ^^ jsfiddle.net/weg82/2
但反之亦然支持没有意义——这相当于一个大的下拉菜单。我不明白。
写$('#name2').val( $(this).prop('defaultSelected') );就够了
@vsync: $(this) 指的是$('#name')，而不是$('#name2')，所以没有
defaultSelected 是 <option> 属性，将始终在 <select> 上返回 undefined

【解决方案4】：

如果您想将选择重置为具有“已选择”属性的选项，请使用此选项。工作原理类似于 form.reset() 内置的 javascript 函数到 select。

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

【讨论】：

【解决方案5】：

这对我很有帮助。

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

【讨论】：

【解决方案6】：

如果您只想将其恢复为您的第一个选项，例如，这就是我如何使其工作的方法“选择一个选项” “Select_id_wrap”显然是围绕选择的 div，但我只是想澄清一下，以防它与它的工作方式有关。我的重置为点击功能，但我相信它也会在 on change 内工作......

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

【讨论】：

【解决方案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');
     });
 });

【讨论】：

再次 - 仅在默认值固定为第一个/空的情况下才有效

【解决方案8】：

这个也可以用

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


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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

在选择元素中设置选项1可以通过这个段来完成。为了直观地显示它，您可以在末尾添加 .trigger('change')。

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

你可以试试这个：

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

【讨论】：

【解决方案13】：

我在使用 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/ 了解上述的工作版本。

【讨论】：

【解决方案14】：

我在选择标记中创建了一个新选项，其值为空字符串 ("") 并使用：

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

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

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

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

【讨论】：