Question

108

Deselect all options in Multiple Select with 1 option

rated 0 times [ 115] [ 7] / answers: 1 / hits: 26922 / 14 Years ago, mon, april 5, 2010, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

melinal

Add To Favorites

Follow

Total Points: 367

Total Questions: 101

Total Answers: 96

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

answered 14 Years ago taylert · Accepted Answer

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>