jQuery를 사용하여 선택 상자에서 첫 번째 옵션을 설정하는 방법은 무엇입니까?

두 개의 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.

어떻게해야합니까?

이와 같은 것이 트릭을 수행해야합니다 : https://jsfiddle.net/TmJCE/898/

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


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

select 요소를 첫 번째 위치로 재설정하려는 경우 가장 간단한 방법은 다음과 같습니다.

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

문서에서 모든 선택된 요소를 재설정하려면

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

편집 : 아래 주석에 따라 명확히하기 위해 목록에 빈 항목이있는 경우에만 선택 요소를 첫 번째 빈 항목으로 재설정합니다.

의견에서 @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/

원래 답변-INCORRECT

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 () 내장 자바 스크립트 함수와 유사하게 선택합니다.

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

이것은 나를 많이 도와줍니다.

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

다음은 첫 번째 옵션으로 되돌리려는 경우 작동하는 방법입니다. 예를 들어 "옵션 선택" "Select_id_wrap"은 선택 주위의 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 속성을 사용하는 데 문제가있었습니다. 더 많은 일반적인 선택 (종속적 인 선택이 많은)은 종속 선택에 데이터 기본 속성을 넣은 다음 재설정 할 때이를 반복하는 것입니다.

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

그리고 자바 스크립트 ...

$('#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/ 을 참조하십시오 .

빈 문자열 ( "") 값을 가진 select 태그에 새 옵션을 만들고 다음을 사용했습니다.

$("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 설정은이 세그먼트로 수행 할 수 있습니다. 시각적으로 표시하려면 끝에 tp add .trigger ( 'change')가 있습니다.

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