CODEWITHSUNDEEP
javascriptinternet-explorerforms
JS Noob
JS Noob

Reputation: 1

Javascript to hide select box elements not working in IE

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]);
        }
    }

Upvotes: 0

Views: 4322

Answers (5)

Sarath
Sarath

Reputation: 116

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

Upvotes: 1

Vismari
Vismari

Reputation: 745

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:

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

Upvotes: 1

UnstableFractal
UnstableFractal

Reputation: 1422

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.

Upvotes: 0

user715714
user715714

Reputation:

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.

Upvotes: 0

Freesn&#246;w
Freesn&#246;w

Reputation: 32143

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!

Upvotes: 1

Related Questions