Javascript to hide select box elements not working in IE

Question

Hey, not sure if I'm going about this the right way. I have two different select boxed. What needs to happen is when a certain item in box 1 is selected, certain items in box 2 are hidden. What I have works fine in FF but not in IE....thoughts?

<div>  
    <label class="form_label">Apparel</label>  
    <select id="Choices" size="1" style="clear: right;" onchange"changeThis();">  
        <option value="select">Pick Your Product</option>  
        <option value="1">choice 1</option>  
        <option value="2">choice 2/option>  
        <option value="3">choice 3</option>  
    </select>
</div>
<div>
    <label class="form_label">Size</label>
    <select id="Sizes" size="1" style="clear: right;">
        <option value="select">Choose Your Size</option>
        <option value="SC">Small Child</option>
        <option value="IC">Intermediate Child</option>
        <option value="MC">Medium Child</option>
    </select>
</div>

...

function changeThing(choice)

{
    var item = document.getElementById("Choices");
    var size = document.getElementById("Sizes");
    var selitem = item.options[item.selectedIndex].value;

    if(selitem == '2546')
    {
        for(i=0; i<2; i++)
        {
            size[i].style.display = 'none';
            //alert(size[i]);
        }
    }

You might find some insight at http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery — chprpipr, Apr 19 '11 at 19:30

score 1 · Answer 1 · answered Apr 19 '11 at 19:30

1

Try using this instead:

http://www.w3schools.com/CSS/pr_class_visibility.asp

It would come out as:

size[i].style.visibility='hidden';

EDIT

Oh, welcome to StackOverflow!

answered Apr 19 '11 at 19:30

Freesnöw

30,619
30
89
138

score 1 · Answer 2 · answered Apr 19 '11 at 19:41

I had the same problem some days ago. IE does not allow the using of visible:hidden or display:none for option element.

You can solve this problem storing the options of select1 in a variable. This variable will have all possible values, so when the value of select1 was changed you can remove all values of select2 and then get the options you need from variable to put into select2.

To summarize:

Store all possible values in a variable
When select1 was changed remove all options of select2
Filter the options(get these values from varible of step1) you need and put into select2

score 1 · Answer 3 · answered Apr 19 '11 at 20:46

You cannot display:none remove will completely remove it, if you want the user not to choose it use disabled. you could do something like this

function changeThing()
{
var item = document.getElementById("Choices");
var size = document.getElementById("Sizes");
var selitem = item.options[item.selectedIndex].value;

if(selitem == '3')
{
    for(i=1; i<2; i++) // filter logic here
    {
        size[i].disabled = true; //false - to reset
        //alert(size[i]);
    }
}
size.selectedIndex = 0; // reset the selection so a disabled item may not be selected. }

score 0 · Answer 4 · answered Apr 19 '11 at 19:35

It depends on how you are firing off the event that calls the changeThing() function. Not sure about IE9, but IE8 and on back has issues with the onChange event. It basically avoids it in IE. You'll have to use onClick instead.

If you are using jQuery to fire the event, the onchange event should work correctly in all browser (even IE). Not sure how other Javascript libraries do it.

score 0 · Answer 5 · answered Apr 19 '11 at 19:36

0

You need to remove this options completely to make it work in IE.

size.remove(i);

So you need to store your options in array and load it back when needed.

answered Apr 19 '11 at 19:36

UnstableFractal

1,403
2
15
29

Javascript to hide select box elements not working in IE

5 Answers5