วิธีที่ดีที่สุดในการยกเลิกการเลือก <select> ใน jQuery?

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

อะไรคือวิธีที่ดีที่สุดในการใช้ jQuery เพื่อยกเลิกการเลือกตัวเลือกอย่างหรูหรา?

ใช้removeAttr ...

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

หรือข้อเสนอ

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

มีคำตอบมากมายที่นี่ แต่น่าเสียดายที่พวกเขาทั้งหมดค่อนข้างเก่าและดังนั้นจึงขึ้นอยู่กับattr/ removeAttrซึ่งไม่ใช่วิธีที่จะไป

@ coffeeyesplease ได้อย่างถูกต้องกล่าวถึงว่าการแก้ปัญหาข้ามเบราว์เซอร์ที่ดีคือการใช้

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

โซลูชันข้ามเบราว์เซอร์ที่ดีอีกวิธีหนึ่งคือ

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

คุณสามารถเห็นมันวิ่งทดสอบตัวเองที่นี่ ผ่านการทดสอบบน IE 7/8/9, FF 11, Chrome 19

เป็นเวลานานแล้วที่ฉันถูกถามและฉันไม่ได้ทดสอบกับเบราว์เซอร์รุ่นเก่า แต่ดูเหมือนว่าคำตอบที่ง่ายกว่าสำหรับฉันคือ

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

.val () ทำงานเพื่อเลือกเช่นกันhttp://api.jquery.com/val/

วิธีที่ง่ายที่สุด

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

ฉันเพียงแค่ใช้สิ่งนี้กับตัวเลือกและมันก็ใช้กลอุบาย

ฉันjQuery 1.7.1

คำตอบจนถึงตอนนี้ใช้ได้สำหรับการเลือกหลายรายการใน IE6 / 7; สำหรับการเลือกที่ไม่ใช่แบบทั่วไปที่พบบ่อยคุณจำเป็นต้องใช้:

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

นี่คือคำอธิบายในโพสต์ที่เชื่อมโยงโดย flyfishr64 หากคุณดูคุณจะเห็นว่ามี 2 กรณี - หลาย / ไม่ใช่หลาย ไม่มีอะไรจะหยุดคุณทั้งสองเพื่อหาทางออกที่สมบูรณ์:

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

โอ้ jquery

เนื่องจากยังมีวิธีการจาวาสคริปต์ดั้งเดิมฉันรู้สึกว่าจำเป็นต้องมี

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

และเพื่อแสดงให้คุณเห็นว่านี่เร็วแค่ไหน: มาตรฐาน

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

สิ่งนี้จะวนซ้ำแต่ละรายการและยกเลิกการเลือกเฉพาะรายการที่มีการตรวจสอบ

Google ด่วนพบโพสต์นี้ที่อธิบายถึงวิธีการทำสิ่งที่คุณต้องการสำหรับรายการที่เลือกเดียวและหลายรายการใน IE วิธีการแก้ปัญหาดูเหมือนสวยหรูเช่นกัน:

$('#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

ขอบคุณมากสำหรับการแก้ปัญหา

วิธีแก้ปัญหาสำหรับรายการคำสั่งผสมตัวเลือกเดียวทำงานอย่างสมบูรณ์ ฉันพบสิ่งนี้หลังจากค้นหาในหลายไซต์

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

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

อีกวิธีง่ายๆ:

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

โดยปกติเมื่อฉันใช้เมนูเลือกแต่ละตัวเลือกมีค่าที่เกี่ยวข้อง ตัวอย่างเช่น

<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

ตอนนี้ไม่ได้ลบคุณลักษณะที่เลือกออกจากตัวเลือก แต่สิ่งที่ฉันต้องการคือค่า

ตั้งรหัสในตัวเลือกของคุณเช่น:
<select id="foo" size="2">

จากนั้นคุณสามารถใช้:
$("#foo").prop("selectedIndex", 0).change();