Question

我目前有以下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;
    }
}

和

function clearAllOpt(select)
{
    select.options[0].selected = false;
}

第一个在调用时取消选择多重选择中的所有选项，第二个在选择其他任何内容时清除第一个选项。

需要的是第一个选项是All。

在FF中这一切都很好用但是在IE8中没有任何反应......有关如何在两者中使用它的任何建议吗？

这是从jsp页面调用...下面的代码 - 编辑了如何填充id和事物，因为它是数据库信息和其他我可能不应该给出的东西:)但这应该给你您正在寻找的信息。

<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>

提前致谢。

Answer 1

愿这很容易

select.selectedIndex = -1;

注意：值“-1”将取消选择所有选项（如果有）。

来源：http://www.w3schools.com/jsref/prop_select_selectedindex.asp

Answer 2

IE8不会触发选项元素上的onclick事件。

另请注意，selectedIndex会返回第一个选定选项，并且不会根据上次选择的选项进行更改。选中ALL时会出现问题，并且您尝试按住CTRL键检查其他选项。

您可以尝试这样的事情：

<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>

Answer 3

不是为每个选项单独使用onclick =“”，而是在select上尝试onchange =“”：

document.getElementById("bar").onchange=function(){
    if(this.options.selectedIndex > 0){
        /* deselect this.options[0] */
    }else{
        /* deselect this.options[1-n] */
    }
}

并在HTML中：

<select id="bar">
    <option>ALL</option>
    <option>option 1</option>
    <option>option 2</option>
    ...
    <option>option n</option>
</select>

Answer 4

此代码存在一些问题

1。）document.getElementById（option.parentNode.id）;

为什么在已经拥有元素的情况下通过id获取元素？你应该这样做 var select = option.parentNode

2。）我不会将变量命名为select - 将其命名为更合适的名称。它没有被重新保留，但它被半保留，因为它被用在很多对象中。所以 - var mySelectBoy = option.parentNode

Answer 5

这样做：

$('#mySelectList').val('');

Answer 6

这在IE中不起作用，但是一个不错的解决方案是使用名称对选择进行分类，然后body 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>

取消选择多选一个选项中的所有选项

6 个答案: