Cách tạo tùy chọn đầu tiên là <select> được chọn với jQuery

Question

Làm cách nào để chọn 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> 

Answer 1

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

Answer 2

// 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'); 

Answer 3

Khi bạn sử dụng

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

này sẽ không làm việc 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ể làm việc trong tất cả các trình duyệt.

Answer 4

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

Answer 5

Nếu bạn có các tùy chọn tắt, bạn có thể thêm không ([tắt]) để ngăn chặn việc lựa chọn họ mà kết quả như sau:

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

Answer 6

Tôi đã phát hiện ra rằng chỉ thiết attr chọn không hoạt động nếu đã có thuộc tính đã chọn. Mã tôi sử dụng bây giờ trước tiên sẽ không đặ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'); 

Answer 7

Dưới đây là làm thế nào tôi sẽ làm điều đó:

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

Answer 8

Một cách khác để thiết lập lại các giá trị (đối với nhiều yếu tố được lựa chọn) có thể là thế này:

$("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; 

}); 

Answer 9

Nếu bạn đang đi để 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> 
    ... 

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

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

Thật tuyệt vời và đơn giản.

Answer 10

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

phương pháp prop Sử dụng jQuery để xóa và thiết lập các tùy chọn cần thiết:

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

Answer 11

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

Việc kết nối cuộc gọi .change() đến cuối cũng sẽ cập nhật tiện ích con giao diện người dùng.

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

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

Answer 12

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

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

Answer 13

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

Answer 14

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

làm việc tốt trong chrome

Answer 15

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

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

làm việc cho tôi.

Answer 16

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

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

... 

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

Answer 17

Sử dụng:

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

Hãy tìm ra đơn giản làm việc trong this JSFiddle.

Answer 18

đơn giản như thế:

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

Answer 19

Sử dụng:

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

Answer 20

Trên mặt sau của bài 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 sự hỗ trợ trình duyệt cho: đầu tiên: chọn ...

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

Answer 21

Nó chỉ hoạt động cho tôi bằng cách sử dụng trình kích hoạt ('thay đổi') ở cuối, như sau:

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

Answer 22

Kiểm tra phương pháp này tốt nhất sử dụng jQuery với ECMAScript 6:

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

Answer 23

Đối với tôi nó chỉ làm việc khi tôi đã thêm đoạn mã sau:

.change();

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

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