Javascript works only in firefox_问答_开发者_运维开发者技术经验分享

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 does开发者_如何学JAVAn'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>

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>