Javascript works only in firefox

Question

Can anyone please why does this javascript work only in firefox?

function filter(obj, what, where)
{
    var v = obj.value;
    var d = document.getElementById(where).getElementsByTagName('optgroup');

    if (v > 0)
    {
        for (var i = 0; l = d.length, i < l; i++)
        {
            d[i].className = 'hide';
            if (d[i].id == what + '_' + v)
                d[i].className = '';
        }
    }
    else
    {
        for (var i = 0; l = d.length, i < l; i++)
            d[i].className = '';
    }
}

I tested it in opera, IE7 and chrome but it doesn't work! Opera error console doesn't show any javascript errors when the page is loaded!

This javascript creates three level auto populating drop down boxes...

I don't know whether it's necessary or not but I post the HTML code too...

State:
<select name="state" onchange="filter(this, 'state', 'district');">
    <option value="0"></option>
    <option value="1">State 1</option>
    <option value="2">State 2</option>
    <option value="3">State 3</option>
</select>

District:
<select name="district" id="district" onchange="filter(this, 'district', 'city');">
    <option value="0"></option>
    <optgroup id="state_1" label="State 1">
        <option value="1">District 1</option>
        <option value="2">District 2</option>
    </optgroup>
    <optgroup id="state_2" label="State 2">
        <option value="3">District 3</option>
    </optgroup>
    <optgroup id="state_3" label="State 3">
        <option value="4">District 4</option>
        <option value="5">District 5</option>
        <option value="6">District 6</option>
    </optgroup>
</select>

City:
<select name="city" id="city">
    <option value="0"></option>
    <optgroup id="district_1" label="District 1">
        <option value="1">City 1</option>
        <option value="2">City 2</option>
        <option value="3">City 3</option>
    </optgroup>
    <optgroup id="district_2" label="District 2">
        <option value="4">City 4</option>
        <option value="5">City 5</option>
    </optgroup>
    <optgroup id="district_3" label="District 3">
        <option value="6">City 6</option>
        <option value="7">City 7</option>
    </optgroup>
</select>

Answer 1

ok I know whats happening. It works. IE and possibly other browsers don't support many css properties on <optgroup>. I'm assuming you have something like this:

optgroup.hide {display:none;}

The above works in firefox but doesn't in IE. I used firebug lite to see that IE indeed applied the 'hide' class to the optgroup. I then tried changing the background to red instead of display:none and it works in IE. I think you have to find another way of hiding the optgroup. Maybe remove it from the select altogether and add it back in afterwards.

See my sample code below.

<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
    .hide{background:red}
</style>
<script type="text/javascript">
function filterSelect(obj, what, elID)
    {
        alert(elID);
        var v = obj.value;
        var d = document.getElementById(elID).getElementsByTagName('optgroup');

        if (v > 0)
        {
            for (var i = 0; l = d.length, i < l; i++)
            {
                d[i].className = 'hide';
                if (d[i].id == what + '_' + v)
                    d[i].className = '';
            }
        }
        else
        {
            for (var i = 0; l = d.length, i < l; i++)
                d[i].className = '';
        }
    }

    </script>
</head>

<body>

State:
<select name="state" onchange="filterSelect(this, 'state', 'district');">
    <option value="0"></option>
    <option value="1">State 1</option>
    <option value="2">State 2</option>
    <option value="3">State 3</option>
</select>

District:
<select name="district" id="district" onchange="filterSelect(this, 'district', 'city');">
    <option value="0"></option>
    <optgroup id="state_1" label="State 1">
        <option value="1">District 1</option>
        <option value="2">District 2</option>
    </optgroup>
    <optgroup id="state_2" label="State 2">
        <option value="3">District 3</option>
    </optgroup>
    <optgroup id="state_3" label="State 3">
        <option value="4">District 4</option>
        <option value="5">District 5</option>
        <option value="6">District 6</option>
    </optgroup>
</select>

City:
<select name="city" id="city">
    <option value="0"></option>
    <optgroup id="district_1" label="District 1">
        <option value="1">City 1</option>
        <option value="2">City 2</option>
        <option value="3">City 3</option>
    </optgroup>
    <optgroup id="district_2" label="District 2">
        <option value="4">City 4</option>
        <option value="5">City 5</option>
    </optgroup>
    <optgroup id="district_3" label="District 3">
        <option value="6">City 6</option>
        <option value="7">City 7</option>
    </optgroup>
</select>

</body>
</html>