Cách tốt nhất để bỏ chọn <select> trong jQuery?

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

Cách tốt nhất, sử dụng jQuery, để bỏ chọn tùy chọn một cách thanh lịch là gì?

Sử dụng removeAttr ...

$("option:selected").removeAttr("selected");

Hoặc Prop

$("option:selected").prop("selected", false)

Có rất nhiều câu trả lời ở đây nhưng thật không may, tất cả chúng đều khá cũ và do đó dựa vào attr/ removeAttrđó thực sự không phải là con đường để đi.

@coffeeyes xin vui lòng đề cập chính xác rằng một giải pháp đa trình duyệt tốt là sử dụng

$("select").val([]);

Một giải pháp đa trình duyệt tốt khác là

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

Bạn có thể thấy nó chạy tự kiểm tra ở đây . Đã thử nghiệm trên IE 7/8/9, FF 11, Chrome 19.

Đã được một thời gian kể từ khi được hỏi và tôi đã không thử nghiệm điều này trên các trình duyệt cũ hơn nhưng dường như với tôi một câu trả lời đơn giản hơn nhiều

$("#selectID").val([]);

.val () cũng hoạt động để chọn http://api.jquery.com/val/

Phương pháp đơn giản nhất

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

Tôi chỉ đơn giản là sử dụng cái này trên chính nó và nó đã làm được điều đó.

Tôi đang sử dụng jQuery 1.7.1 .

Câu trả lời cho đến nay chỉ hoạt động cho nhiều lựa chọn trong IE6 / 7; đối với lựa chọn không đa phổ biến hơn, bạn cần sử dụng:

$("#selectID").attr('selectedIndex', '-1');

Điều này được giải thích trong bài được liên kết bởi flyfishr64. Nếu bạn nhìn vào nó, bạn sẽ thấy có 2 trường hợp - đa / không đa. Không có gì ngăn cản bạn chaning cả hai cho một giải pháp hoàn chỉnh:

$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

Ôi chao.

Vì vẫn chưa có cách tiếp cận javascript gốc, tôi cảm thấy cần phải cung cấp một cách tiếp cận.

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

Và chỉ để cho bạn thấy điều này nhanh hơn bao nhiêu: điểm chuẩn

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

Điều này sẽ lặp qua từng mục và bỏ chọn chỉ những mục được kiểm tra

Một google nhanh chóng tìm thấy bài đăng này mô tả cách thực hiện những gì bạn muốn cho cả danh sách chọn đơn và nhiều lựa chọn trong IE. Giải pháp có vẻ khá thanh lịch là tốt:

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

}); 

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

$(option).removeAttr('selected') //replace 'option' with selected option's selector

Cảm ơn rất nhiều cho giải pháp.

Giải pháp cho danh sách kết hợp lựa chọn duy nhất hoạt động hoàn hảo. Tôi tìm thấy điều này sau khi tìm kiếm trên nhiều trang web.

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");

$("option:selected").attr("selected", false);

Một cách đơn giản khác:

$("#selectedID")[0].selectedIndex = -1

Thông thường khi tôi sử dụng menu chọn, mỗi tùy chọn có một giá trị liên quan đến nó. Ví dụ

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

Bây giờ điều này không xóa thuộc tính được chọn khỏi tùy chọn nhưng tất cả những gì tôi thực sự muốn là giá trị.

Đặt id trong lựa chọn của bạn, như:
<select id="foo" size="2">

Sau đó, bạn có thể sử dụng:
$("#foo").prop("selectedIndex", 0).change();