Javascript 使用 1 个选项取消选择多选中的所有选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2580960/
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
Deselect all options in Multiple Select with 1 option
提问by Shaded
I currently have the following js code
我目前有以下js代码
function clearMulti(option)
{
var i;
var select = document.getElementById(option.parentNode.id);
for(i=1;i<select.options.length;i++)
{
select.options[i].selected=false;
}
}
and
和
function clearAllOpt(select)
{
select.options[0].selected = false;
}
The first one deselects all options in the multiple select when called and the second clears the first option whenever anything else is selected.
第一个在调用时取消选择多选中的所有选项，第二个在选择任何其他选项时清除第一个选项。
The need for this is that the first option is for All.
对此的需要是，第一个选项适用于所有人。
This all works fine and dandy in FF, but in IE8 nothing happens... any suggestions on how to get this to work in both?
这一切在 FF 中都可以正常工作，但在 IE8 中没有任何反应......关于如何让它在两者中工作的任何建议？
This is called from a jsp page... code below -- edits were made for how ids and things are populated since it's database info and other things that I probably shouldn't give out :) but this should give you the info that you're looking for.
这是从 jsp 页面调用的...下面的代码 - 对 ids 和事物的填充方式进行了编辑，因为它是数据库信息和我可能不应该提供的其他内容:) 但这应该为您提供您想要的信息正在寻找。
<select id="blahSelect" name="blahSelect" style="width:80%" size=7 multiple>
<option id="All Blah" onclick="clearMulti(this)">All Blah</option>
<option id="**from sql**" onclick="clearAllOpt(this.parentNode)">**from sql**</option>
</select>
Thanks in advance.
提前致谢。
采纳答案by greim
Instead of a separate onclick="" for each option, try an onchange="" on the select:
不要为每个选项单独使用 onclick=""，而是在选择上尝试 onchange=""：
document.getElementById("bar").onchange=function(){
if(this.options.selectedIndex > 0){
/* deselect this.options[0] */
}else{
/* deselect this.options[1-n] */
}
}
and in the HTML:
并在 HTML 中：
<select id="bar">
<option>ALL</option>
<option>option 1</option>
<option>option 2</option>
...
<option>option n</option>
</select>
回答by Dmitry
May this easily
愿这容易
select.selectedIndex = -1;
Note: The value "-1" will deselect all options (if any).
注意：值“-1”将取消选择所有选项（如果有）。
Source: http://www.w3schools.com/jsref/prop_select_selectedindex.asp
来源：http: //www.w3schools.com/jsref/prop_select_selectedindex.asp
回答by Thomas Kj?rnes
IE8 does not fire onclick events on option elements.
IE8 不会在选项元素上触发 onclick 事件。
Also note that selectedIndex returns the firstselected option, and does not change according to the last selected option. This leads to issues when ALL is checked, and you try to check other options with CTRL held down.
还要注意 selectedIndex 返回第一个选择的选项，并且不会根据最后一个选择的选项而改变。这会导致在选中 ALL 时出现问题，并且您尝试在按住 CTRL 的情况下检查其他选项。
You could try something like this:
你可以尝试这样的事情：
<script type="text/javascript">
function excludeFirstOption(select) {
if (select.selectedIndex === 0) {
for (var i=0; i<select.options.length; i++) {
select.options[i].selected = false;
}
}
}
</script>
<select size="7" multiple="multiple" onchange="excludeFirstOption(this)">
<option>All</option>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
</select>
回答by Graphic Equaliser
This does not work in IE, but an elegant solution is to class the select(s) with a name, then body onload routine hooks up the options for each select of that class :-
这在 IE 中不起作用，但一个优雅的解决方案是使用名称对选择进行分类，然后主体 onload 例程为该类的每个选择连接选项：-
<html>
<head>
<script>
function filtddchg()
{
if (this.value.length==0) this.parentElement.selectedIndex=0;
else this.parentElement.options[0].selected=false;
return true;
}
function init()
{
var ii,jj,ary=document.getElementsByClassName("ddflt");
for (ii=0;ii<ary.length;++ii) for (jj=0;jj<ary[ii].length;++jj)
ary[ii].options[jj].onclick=filtddchg;
}
</script>
</head>
<body onload="init();">
<b>Country</b><br>
<select name="cntry" id="cntry" multiple size=6 class="ddflt">
<option value="" selected>-All Countries-</option>
<option value="1">UK</option>
<option value="2">France</option>
<option value="3">Germany</option>
<option value="4">Spain</option>
<option value="5">Italy</option>
</select>
</body>
</html>
回答by Ahmad Naveed
Just do this:
只需这样做：
$('#mySelectList').val('');
回答by Tim
There are a few issues with this code
这段代码有几个问题
1.) document.getElementById(option.parentNode.id);
1.) document.getElementById(option.parentNode.id);
Why are you getting the element by id when you already have the element? You should just do var select = option.parentNode
当您已经拥有元素时，为什么要通过 id 获取元素？你应该只做 var select = option.parentNode
2.) I wouldn't name the variable select - name it something more appropriate. Its not reserverd but its semi-reserved as it is used in a lot of objects. So - var mySelectBoy = option.parentNode
2.) 我不会将变量命名为 select - 将其命名为更合适的名称。它不是保留，而是半保留，因为它被用于很多对象。所以 - var mySelectBoy = option.parentNode
