Deselect all options in Multiple Select with 1 option_问答_开发者

Deselect all options in Multiple Select with 1 option

开发者 https://www.devze.com 2022-12-25 13:13 出处：网络

I currently have the following js code function clearMulti(option) { var i; var select = document.getElementById(option.parentNode.id);

I currently have the following js code

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?

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.

<select id="blahSelect" name="blahSelect" style="width:8开发者_如何学编程0%" 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.

May this easily

select.selectedIndex = -1;

Note: The value "-1" will deselect all options (if any).

Source: http://www.w3schools.com/jsref/prop_select_selectedindex.asp

IE8 does not fire onclick events on option elements.

Also note that selectedIndex returns the first selected 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.

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>

Instead of a separate onclick="" for each option, try an onchange="" on the select:

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

and in the HTML:

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

There are a few issues with this code

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

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

Just do this:

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

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

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