Cách tạo tùy chọn đầu tiên của <select> được chọn bằng jQuery

Làm cách nào để tạo tùy chọn đầu tiên được chọn với jQuery?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

$("#target").val($("#target option:first").val());

Bạn có thể thử cái này

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

Khi bạn sử dụng

$("#target").val($("#target option:first").val());

điều này sẽ không hoạt động trong Chrome và Safari nếu giá trị tùy chọn đầu tiên là null.

tôi thích

$("#target option:first").attr('selected','selected');

bởi vì nó có thể hoạt động trong tất cả các trình duyệt.

Thay đổi giá trị của đầu vào được chọn hoặc điều chỉnh thuộc tính được chọn có thể ghi đè lên thuộc tính được chọn mặc định của phần tử DOM, dẫn đến một phần tử có thể không được đặt lại đúng trong một biểu mẫu có sự kiện đặt lại được gọi.

Sử dụng phương thức prop của jQuery để xóa và đặt tùy chọn cần thiết:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

Một điểm tinh tế mà tôi nghĩ rằng tôi đã khám phá về các câu trả lời được bình chọn hàng đầu là mặc dù chúng thay đổi chính xác giá trị đã chọn, nhưng chúng không cập nhật phần tử mà người dùng nhìn thấy (chỉ khi nhấp vào tiện ích, họ mới thấy kiểm tra bên cạnh yếu tố cập nhật).

Xâu chuỗi cuộc gọi .change () đến cuối cũng sẽ cập nhật tiện ích UI.

$("#target").val($("#target option:first").val()).change();

(Lưu ý rằng tôi nhận thấy điều này trong khi sử dụng jQuery Mobile và một hộp trên máy tính để bàn Chrome, vì vậy điều này có thể không xảy ra ở mọi nơi).

Nếu bạn có các tùy chọn bị vô hiệu hóa, bạn có thể thêm không ([bị tắt]) để ngăn việc chọn chúng dẫn đến kết quả sau:

$("#target option:not([disabled]):first").attr('selected','selected')

Một cách khác để đặt lại các giá trị (cho nhiều yếu tố được chọn) có thể là:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

Đơn giản như thế:

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

Tôi thấy rằng chỉ cài đặt attr được chọn sẽ không hoạt động nếu đã có thuộc tính được chọn. Mã tôi sử dụng bây giờ trước tiên sẽ bỏ đặt thuộc tính đã chọn, sau đó chọn tùy chọn đầu tiên.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

Mặc dù mỗi chức năng có thể không cần thiết ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

làm việc cho tôi

Đây là cách tôi sẽ làm điều đó:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

Nó chỉ hoạt động với tôi bằng cách sử dụng một kích hoạt ('thay đổi') ở cuối, như thế này:

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

Nếu bạn định sử dụng tùy chọn đầu tiên làm mặc định như

<select>
    <option value="">Please select an option below</option>
    ...

sau đó bạn chỉ có thể sử dụng:

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

Nó là tốt đẹp và đơn giản.

Điều này làm việc cho tôi!

$("#target").prop("selectedIndex", 0);

Ở mặt sau câu trả lời của James Lee Baker, tôi thích giải pháp này vì nó loại bỏ sự phụ thuộc vào hỗ trợ trình duyệt cho: trước tiên: đã chọn ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

Đối với tôi nó chỉ hoạt động khi tôi thêm đoạn mã sau:

.change();

Đối với tôi nó chỉ hoạt động khi tôi thêm mã sau: Vì tôi muốn "đặt lại" biểu mẫu, nghĩa là chọn tất cả các tùy chọn đầu tiên trong tất cả các lựa chọn của biểu mẫu, tôi đã sử dụng mã sau:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

Sử dụng:

$("#selectbox option:first").val()

Vui lòng tìm cách làm việc đơn giản trong JSFiddle này .

Đối với tôi, nó chỉ hoạt động khi tôi thêm dòng mã sau

$('#target').val($('#target').find("option:first").val());

$("#target").val(null);

làm việc tốt trong chrome

Nếu bạn đang lưu trữ đối tượng jQuery của phần tử chọn:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

Kiểm tra cách tiếp cận tốt nhất này bằng jQuery với ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

Bạn có thể chọn bất kỳ tùy chọn từ dropdownbằng cách sử dụng nó.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

Thay thế id bằng id và chỉ mục thẻ chọn cụ thể cụ thể bằng phần tử cụ thể bạn muốn chọn.

I E

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Vì vậy, ở đây để lựa chọn phần tử đầu tiên tôi sẽ sử dụng đoạn mã sau:

$('select#ddlState').val($('#ddlState option')[0].value)

Sử dụng:

alert($( "#target option:first" ).text());