Question

任何人都可以为什么这个javascript只能在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 = '';
    }
}

我在歌剧，IE7和Chrome中测试过但它不起作用！加载页面时，Opera错误控制台不显示任何javascript错误！

这个javascript会创建三个级别的自动填充下拉框......

我不知道是否有必要，但我也发布了HTML代码......

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

好的，我知道发生了什么事。有用。 IE和可能的其他浏览器不支持<optgroup>上的许多css属性。我假设你有类似的东西：

optgroup.hide {display:none;}

上面的工作在Firefox中，但不在IE中。我使用firebug lite看到IE确实将'hide'类应用于optgroup。然后我尝试将背景更改为红色而不是display：none，它可以在IE中使用。我认为你必须找到隐藏optgroup的另一种方法。也许完全从选择中删除它，然后将其添加回来。

请参阅下面的示例代码。

<!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>

Javascript仅适用于Firefox

1 个答案: