如何使用jQuery设置下拉框的第一个选项？

Question

我有两个HTML select框。在其中一个 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。

我该怎么做？

- Anish

---

我将标题从 [...]reset[...] 改为 _[...]set the first option on[...]_，因为 reset 暗示着设置最初加载的默认值。 - Pierre de LESPINAY

Answer 1

像这样处理应该会有用: https://jsfiddle.net/TmJCE/898/

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


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

- Jack

---

没错，但这仍展示了基本概念，在这种情况下看起来他想将其重置为“全选”，也就是第一个选项。 - Jack

如果您从<button>元素中使用此功能，请确保不要设置type="reset"。在我将类型设置为“button”之前，它对我没有起作用。 - Caumons

我会选择下拉菜单的第一个元素，但文本仍然是旧的。 - VaTo

我正在使用它作为选择框的其余部分，这样可以吗？还是我没有正确理解它？ - always-a-learner

@ankitsuthar 它将更改select的所选选项为提供的值。 select.prop('selectedIndex', 0)将重置为第一个选项，select.prop('selectedIndex', 1)将设置为第二个选项。 - Jack

@Jack 不是我的情况，我不得不使用 select.prop('selectedIndex', 1) 来设置我的第一个索引。我不知道为什么。 - ahmednawazbutt

Answer 2

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

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

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

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

编辑：如下评论所述，这将重置选择元素为其第一个空白条目，仅当列表中存在空白条目时。

- AndreasT

---

是的，这个方案几乎总是可行的。其他解决方案有时可能会出现问题。 确实是最简单的方法。 - Sworup Shakya

警告：只有在您确实希望选择第一个选项，并且第一个选项的值设置为空白时，这种方法才有效。如果您的第一个选项具有其他值，或者SELECT框中没有任何一个选项的值为空白，则不会引起任何变化。或者，如果其他某个选项的值为空白，则会选择该选项。 - HBlackorby

@HBlackorby，你的评论很有帮助，但是1）具有value =“”选项可以以任何顺序出现。2）没有值属性的选项，即<option> </ option>与具有空字符串值属性的选项，即<option value =“”> </ option>不同，并且您明确指出我们需要value =“”部分。3）即使没有空字符串值的<option>;设置.val（''）也会“影响更改”，选择将显示为空白，对吗？至少在我的Chrome中... - Nate Anderson

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/

---

原回答 - 不正确

在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

---

Jens Roland所说的话，支持相反的情况 ^^ http://jsfiddle.net/weg82/2/ - zynaps

但是反之支持没有意义--那相当于一个大的下拉菜单。我不理解。 - Jens Roland

$('#name2').val( $(this).prop('defaultSelected') ); 可以满足需求。 - vsync

@vsync: $(this) 是指的 $('#name')，而不是 $('#name2')，所以不行。 - Jens Roland

defaultSelected is an <option> property, will always return undefined on a <select> - Pierre de LESPINAY

Answer 4

如果您想将选择重置为具有 "selected" 属性的选项，请使用此选项。与表单内置javascript函数select.reset()类似。

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

- Sathesh

Answer 5

以下是我如何使其正常工作的方法，如果您只想将其返回到第一个选项，例如“选择一个选项”。 “Select_id_wrap”显然是选择周围的div，但为了清楚起见，我只是想澄清一下，以防这对其如何工作有任何影响。我的重置为单击函数，但我确定它也可以在更改中工作...

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

- Ian

Answer 6

这对我有很大帮助。

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

- Andrej Gaspar

Answer 7

这也可以被使用。

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


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

- Azam Alvi

Answer 8

请使用以下代码。在此处查看其工作情况：http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

- Muhammad Usman

---

只有在默认值被固定为第一个/空的情况下，"Again"才能起作用。 - Jens Roland

Answer 9

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

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

- Nick Barrett

Answer 10

可以通过以下代码段将选择元素中的选项设置为选项1。为了在页面上显示它，您需要在末尾添加 .trigger('change')。

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

- Chamod Pathirana