如何使用 jQuery 在 select 框上設置第一個選項？

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 第一個select的選項（即id="name" ）時，我需要將第二個select重置為select all ； 同樣，當我 select 是第二個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

正如@PierredeLEESPINAY 在評論中指出的那樣，我原來的解決方案是不正確的——它會將下拉列表重置為最頂層的選項，但這只是因為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') );
});

Answer 4

如果要將選擇重置為具有“已選擇”屬性的選項，請使用此選項。 工作類似於 form.reset() 內置的 javascript 函數到選擇。

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

Answer 5

這對我有很大幫助。

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

Answer 6

如果您只想讓它回到您的第一個選項，這就是我讓它工作的方法，例如“選擇一個選項”“Select_id_wrap”顯然是選擇周圍的 div，但我只想說清楚，以防萬一它有對它如何工作的任何影響。 我的重置為點擊功能，但我相信它也可以在更改中工作......

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

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

Answer 8

這是重置表單中所有選擇框的最靈活/可重用的方法。

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

Answer 9

使用下面的代碼。 看到它在這里工作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 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

select元素中的設置選項1可以通過這個段來完成。 為了直觀地顯示它，您在末尾添加了 .trigger('change') 。

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

Answer 12

你可以試試這個：

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

Answer 13

我在 @Jens Roland 在 jQuery v1.9.1 的答案中使用 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/ 。

Answer 14

我在 select 標簽中創建了一個新選項，它的值為空字符串 ("") 並使用：

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

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

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

Answer 17

這是我使用的最佳解決方案。 這將適用於超過 1 個選擇框

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

Answer 18

$('#name').prop('selectedIndex', 0), 
$('#name').attr('selected', 'selected'), 
$('#name').find('select option:eq(0)').prop('selected', true), 
$("#name option[value=none]")

所有這些選項只有在您向它添加.change() 以更新您的下拉列表以顯示第一個選項時才有效。

Answer 19

非常簡單：

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