在jQuery中取消选择<select>的最佳方法？

Question

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

使用jQuery优雅地取消选择选项的最佳方法是什么？

Answer 1

使用removeAttr ...

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

或者道具

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

Answer 2

这里有很多答案,但遗憾的是它们都很老,因此依赖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上测试.

Answer 3

自问过以来已经有一段时间了,我还没有在旧浏览器上测试过,但在我看来,一个更简单的答案是

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

.val()适用于选择http://api.jquery.com/val/

Answer 4

最简单的方法

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

我只是在选择本身使用它,它就可以了.

我在使用jQuery 1.7.1.

Answer 5

到目前为止,答案仅适用于IE6/7中的多个选择; 对于更常见的非多选,您需要使用:

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

这在flyfishr64链接的帖子中有解释.如果你看一下,你会看到有两种情况 - 多/非多.没有什么可以阻止你去寻找完整的解决方案:

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

Answer 6

哦,jquery.

由于还有本机javascript方法,我觉得需要提供一个.

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

只是为了向您展示这是多快:基准

Answer 7

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

这将遍历每个项目并仅取消选中已检查的项目

Answer 8

一个快速谷歌发现这篇文章描述了如何在IE中为单个和多个选择列表做你想要的.解决方案似乎也很优雅:

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

}); 

Answer 9

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