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

How to set the first option on a select box using jQuery?

提问by Anish

I have two HTML selectboxes. I need to reset one selectbox when I make a selection in another.

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

When I select an option of the first select(i.e. id="name"), I need to reset the second selectto select all; similarly, when I select an option of the second select(i.e. id="name2"), I need to reset the first selectto select all.

当我选择第一个选项select（即id="name"）时，我需要将第二个重置select为select all; 同样，当我选择第二个选项select（即id="name2"）时，我需要将第一个重置select为select all。

How can I do that?

我怎样才能做到这一点？

回答by Hyman

Something like this should do the trick: https://jsfiddle.net/TmJCE/898/

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

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


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

回答by AndreasT

If you just want to reset the select element to it's first position, the simplest way may be:

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

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

To reset all select elements in the document:

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

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

EDIT: To clarify as per a comment below, this resets the select element to its first blank entry and only if a blank entry exists in the list.

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

回答by Jens Roland

As pointed out by @PierredeLESPINAY in the comments, my original solution was incorrect - it would reset the dropdown to the topmost option, but only because the undefinedreturn value resolved to index 0.

正如@PierredeLESPINAY 在评论中指出的那样，我原来的解决方案是不正确的——它会将下拉列表重置为最顶层的选项，但这只是因为undefined返回值解析为索引 0。

Here's a correct solution, which takes the selectedproperty into account:

这是一个正确的解决方案，它考虑了selected属性：

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

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

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

---

---

Original answer - INCORRECT

原始答案 - 不正确

In jQuery 1.6+ you need to use the .propmethod to get the default selection:

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

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

To make it reset dynamically when the first dropdown changes, use the .changeevent:

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

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

回答by Sathesh

Use this if you want to reset the select to the option which has the "selected" attribute. Works similar to the form.reset() inbuilt javascript function to the select.

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

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

回答by Ian

Here is how I got it to work if you just want to get it back to your first option e.g. "Choose an option" "Select_id_wrap" is obviously the div around the select, but I just want to make that clear just in case it has any bearing on how this works. Mine resets to a click function but I'm sure it will work inside of an on change as well...

如果您只想让它回到您的第一个选项，这就是我如何让它工作的，例如“选择一个选项”“Select_id_wrap”显然是选择周围的 div，但我只想说清楚，以防万一它有对它如何工作的任何影响。我的重置为点击功能，但我相信它也可以在更改中工作......

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

回答by Andrej Gaspar

This helps me a lot.

这对我有很大帮助。

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

回答by Muhammad Usman

Use the code below. See it working here http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

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

回答by Azam Alvi

This can also be used

这也可以使用

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


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

回答by Nick Barrett

This is the most flexible/reusable way to reset all select boxes in your form.

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

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

回答by mightytightywty

Here's how to handle it with a random option element defined as the default value (in this case Text 2 is the default):

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