jQueryを使用して選択ボックスに最初のオプションを設定するにはどうすればよいですか？

2つのHTML selectボックスがあります。select別のボックスを選択したときに、1つのボックスをリセットする必要があります。

<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"）、私は2番目をリセットする必要がありますselectしselect all、私は2番目のオプションを選択する場合も同様に、select（すなわちid="name2"）、私が最初にリセットする必要がありselectにしますselect all。

どうやってやるの？

このような何かがうまくいくはずです：https : //jsfiddle.net/TmJCE/898/

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


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

select要素を最初の位置にリセットするだけの場合、最も簡単な方法は次のとおりです。

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

ドキュメント内のすべての選択要素をリセットするには：

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

編集：以下のコメントに従って明確にするために、これは、select要素を最初の空白のエントリにリセットし、空白のエントリがリストに存在する場合に限ります。

コメントの@PierredeLESPINAYで指摘されているように、私の元の解決策は正しくありませんでした。これは、ドロップダウンを最上位のオプションにリセットしますが、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') );
});

「selected」属性を持つオプションに選択をリセットする場合に使用します。form.reset（）と同様に機能し、組み込みのJavaScript関数を選択します。

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

これは私に大いに役立ちます。

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

これが最初のオプションに戻したい場合に機能させる方法です。たとえば、「Choose an option」「Select_id_wrap」は明らかにselectの周りのdivですが、念のため、それを明確にしたいだけです。これがどのように機能するかに関係ありません。鉱山はクリック機能にリセットされますが、変更中でも機能するはずです...

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

以下のコードを使用してください。ここで動作することを確認してくださいhttp://jsfiddle.net/usmanhalalit/3HPz4/

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

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

これも使えます

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


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

これは、フォーム内のすべての選択ボックスをリセットする最も柔軟で再利用可能な方法です。

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

これを、デフォルト値として定義されたランダムオプション要素で処理する方法を示します（この場合、テキスト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>

あなたはこれを試すことができます：

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

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/を参照してください。

空の文字列（ ""）の値を持つ選択タグに新しいオプションを作成して使用しました：

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

onchangeイベントをバインドするためにjqueryを使用して選択しますが、別の$(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;
    }
});

このコードを使用して、すべての選択フィールドをデフォルトのオプションにリセットします。選択した属性が定義されています。

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

ここで私が使用している最高のソリューションです。これは1つ以上のslectboxに適用されます

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

select要素のオプション1の設定は、このセグメントで行うことができます。それを視覚的に表示するには、末尾に.trigger（ 'change'）を追加します。

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