jQuery를 사용하여 선택 상자에 첫번째 옵션을 설정하는 방법?

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

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

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

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

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

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

@Pierrede가 지적한 바와 같이댓글에서 LESPINAY, 원래 해결책이 틀렸습니다 - 드롭다운을 최상위 옵션으로 재설정하지만, 단지 다음과 같은 이유 때문입니다.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+에서는 메소드를 사용하여 기본 선택을 받아야 합니다.

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

첫 번째 드롭다운이 변경될 때 동적으로 재설정하려면 이벤트를 사용합니다.

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

선택을 "selected" 속성을 가진 옵션으로 재설정하려면 이를 사용합니다.form.reset() inbuilt javascript 함수와 유사하게 동작합니다.

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

이것은 저에게 많은 도움이 됩니다.

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

예를 들어 "옵션 선택"과 같은 첫 번째 옵션으로 되돌리고 싶다면 다음과 같이 작업을 시작할 수 있습니다. "Select_id_wrap"은 분명히 셀렉트를 둘러싼 디브이지만, 이것이 어떻게 작동하는지와 관련이 있을 경우를 대비하여 분명히 하고 싶습니다.내 것은 클릭 기능으로 리셋되지만 온 체인지 안에서도 작동할 것이라 확신합니다...

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

이 세그먼트는 선택 요소에서 옵션 1을 설정할 수 있습니다.시각적으로 표시하려면 마지막에 .trigger('change')를 추가해야 합니다.

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

기본값으로 정의된 임의 옵션 요소로 처리하는 방법은 다음과 같습니다(이 경우 텍스트 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/ 을 참조하십시오.

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

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

jquery를 사용하여 변경 이벤트 바인딩을 선택하지만 다른 이벤트를 생성할 필요는 없습니다.$(this)jquery object.

$('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개 이상의 셀렉트 박스에 적용됩니다.

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

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

이 모든 옵션은 .change()를 추가하여 드롭다운을 업데이트하여 첫 번째 옵션을 표시하는 경우에만 작동합니다.

언급URL : https://stackoverflow.com/questions/7445492/how-to-set-the-first-option-on-a-select-box-using-jquery