Làm cách nào để đặt tùy chọn đầu tiên trên hộp chọn bằng jQuery?

Tôi có hai selecthộp HTML . Tôi cần đặt lại một selecthộp khi tôi chọn vùng khác.

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

Khi tôi chọn một tùy chọn của cái đầu tiên select(nghĩa là id="name"), tôi cần đặt lại cái thứ hai selectthành select all; Tương tự, khi tôi chọn một tùy chọn thứ hai select(ví dụ id="name2"), tôi cần phải thiết lập lại là người đầu tiên selectđến select all.

Làm thế nào tôi có thể làm điều đó?

Một cái gì đó như thế này nên thực hiện thủ thuật: https://jsfiddle.net/TmJCE/898/

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


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

Nếu bạn chỉ muốn đặt lại phần tử chọn về vị trí đầu tiên, cách đơn giản nhất có thể là:

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

Để đặt lại tất cả các thành phần được chọn trong tài liệu:

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

EDIT: Để làm rõ theo nhận xét bên dưới, phần này đặt lại phần tử chọn vào mục trống đầu tiên của nó và chỉ khi một mục trống tồn tại trong danh sách.

Như @PierredeLESPINAY đã chỉ ra trong các bình luận, giải pháp ban đầu của tôi không chính xác - nó sẽ đặt lại danh sách thả xuống tùy chọn trên cùng, nhưng chỉ vì undefinedgiá trị trả về được giải quyết cho chỉ số 0.

Đây là một giải pháp chính xác, có selectedtính đến tài sản:

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

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

Câu trả lời gốc - TUYỆT VỜI

Trong jQuery 1.6+, bạn cần sử dụng .propphương thức để có được lựa chọn mặc định:

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

Để làm cho nó tự động thiết lập lại khi thả xuống đầu tiên thay đổi, hãy sử dụng .changesự kiện:

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

Sử dụng cái này nếu bạn muốn đặt lại lựa chọn thành tùy chọn có thuộc tính "được chọn". Hoạt động tương tự như hàm javascript của form.reset () để chọn.

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

Điều này giúp tôi rất nhiều.

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

Đây là cách tôi làm cho nó hoạt động nếu bạn chỉ muốn đưa nó trở lại tùy chọn đầu tiên của mình, ví dụ: "Chọn một tùy chọn" "Chọn_id_wrap" rõ ràng là div xung quanh lựa chọn, nhưng tôi chỉ muốn làm rõ điều đó trong trường hợp nó có bất kỳ mang về cách làm việc này. Của tôi đặt lại chức năng nhấp nhưng tôi chắc chắn nó cũng sẽ hoạt động bên trong thay đổi ...

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

Sử dụng mã dưới đây. Xem nó hoạt động ở đây http://jsfiddle.net/usmanhalalit/3HPz4/

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

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

Điều này cũng có thể được sử dụng

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


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

Đây là cách linh hoạt / tái sử dụng nhất để đặt lại tất cả các hộp chọn trong biểu mẫu của bạn.

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

Dưới đây là cách xử lý nó với phần tử tùy chọn ngẫu nhiên được xác định là giá trị mặc định (trong trường hợp này Văn bản 2 là mặc định):

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

Bạn có thể thử điều này:

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

Tôi gặp vấn đề khi sử dụng thuộc tính defaultSelected trong câu trả lời của @Jens Roland trong jQuery v1.9.1. Một cách chung hơn (với nhiều lựa chọn phụ thuộc) sẽ là đặt thuộc tính mặc định dữ liệu vào các lựa chọn phụ thuộc của bạn và sau đó lặp qua chúng khi đặt lại.

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

Và javascript ...

$('#name0').change(function(){
    if($('#name0').val() == '') {
        $('select.name').each(function(index){
          $(this).val($(this).data('default'))  
        })
    } else {
      $('select.name').val($('#name0').val() );
    }
});

Xem http://jsfiddle.net/8hvqN/ để biết phiên bản làm việc ở trên.

Tôi đã tạo một tùy chọn mới trong thẻ chọn có giá trị chuỗi rỗng ("") và được sử dụng:

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

Sử dụng jquery để ràng buộc sự kiện onchange để chọn nhưng bạn không cần tạo một $(this)đối tượng jquery khác .

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

Sử dụng mã này để đặt lại tất cả các trường lựa chọn về tùy chọn mặc định, trong đó thuộc tính được chọn được xác định.

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

Đây là giải pháp tốt nhất tôi đang sử dụng. Điều này sẽ áp dụng cho hơn 1 slectbox

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

Cài đặt tùy chọn 1 trong phần tử chọn có thể được thực hiện bởi phân đoạn này. Để hiển thị trực quan, bạn có tp thêm .trigger ('thay đổi') ở cuối.

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