在 jQuery 中取消选择 <select> 的最佳方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1857781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best way to unselect a <select> in jQuery?
提问by user198729
<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>
What is the best way, using jQuery, to elegantly unselect the option?
使用 jQuery 优雅地取消选择选项的最佳方法是什么？
回答by Ei Maung
Use removeAttr...
使用removeAttr...
$("option:selected").removeAttr("selected");
Or Prop
或道具
$("option:selected").prop("selected", false)
回答by Jon
There are lots of answers here but unfortunately all of them are quite old and therefore rely on attr/removeAttrwhich is really not the way to go.
这里有很多答案，但不幸的是，它们都已经很老了，因此依赖attr/removeAttr这确实不是可行的方法。
@coffeeyesplease correctly mentions that a good, cross-browser solution is to use
@coffeeyesplease 正确地提到一个好的跨浏览器解决方案是使用
$("select").val([]);
Another good cross-browser solution is
另一个好的跨浏览器解决方案是
// Note the use of .prop instead of .attr
$("select option").prop("selected", false);
You can see it run a self-test here. Tested on IE 7/8/9, FF 11, Chrome 19.
您可以在此处看到它运行自检。在 IE 7/8/9、FF 11、Chrome 19 上测试。
回答by coffeeyesplease
It's a been a while since asked, and I haven't tested this on older browsers but it seems to me a much simpler answer is
自从问起已经有一段时间了，我还没有在旧浏览器上测试过这个，但在我看来，一个更简单的答案是
$("#selectID").val([]);
.val() works for select as well http://api.jquery.com/val/
.val() 也适用于选择http://api.jquery.com/val/
回答by Joshua Pinter
Simplest Method
最简单的方法
$('select').val('')
$('select').val('')
I simply used this on the select itself and it did the trick.
我只是在选择本身上使用它，它就成功了。
I'm on jQuery 1.7.1.
我在jQuery 1.7.1 上。
回答by thetoolman
Answers so far only work for multiple selects in IE6/7; for the more common non-multi select, you need to use:
到目前为止的答案仅适用于 IE6/7 中的多选；对于更常见的非多选，您需要使用：
$("#selectID").attr('selectedIndex', '-1');
This is explained in the post linked by flyfishr64. If you look at it, you will see how there are 2 cases - multi / non-multi. There is nothing stopping you chaning both for a complete solution:
这在 flyfishr64 链接的帖子中进行了解释。如果您查看它，您将看到有 2 种情况 - 多 / 非多。没有什么能阻止你为一个完整的解决方案而改变：
$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");
回答by Blaine Kasten
Oh jquery.
哦jquery。
Since there is yet a native javascript approach, I feel the need to provide one.
由于还没有原生 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
And just to show you how much faster this is: benchmark
只是为了向您展示这有多快：基准测试
回答by DinoMyte
$("#selectID option:selected").each(function(){
$(this).removeAttr("selected");
});
This would iterate through each item and unselect only the ones which are checked
这将遍历每个项目并仅取消选择已检查的项目
回答by Jeff Paquette
回答by premkumar
$("#select_id option:selected").prop("selected", false);
回答by Madeswaran Govindan
Thanks a lot for the solution.
非常感谢您的解决方案。
The solution for single choice combo list works perfectly. I found this after searching on many sites.
单选组合列表的解决方案非常有效。我在许多网站上搜索后发现了这一点。
$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");
