2010-08-30 66 views
1

任何人都可以请为什么这个JavaScript只能在Firefox中使用?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 = ''; 
    } 
} 

我在Opera,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> 
+3

只是一个预感,函数参数'where'可能可能是一个javascript关键字。试着改变它? – 2010-08-30 17:05:55

+2

@Moin:不是的。不要让语法突出显示器愚弄你。它试图以同样的方式突出显示所有内容,“where”是其他语言(如C#/ LINQ和SQL)中的关键字。 – cHao 2010-08-30 17:12:02

+0

是啊,荧光笔让我在那里,'哪里'是一个常见的关键字的事实。无论如何,我发现了这个问题。请参阅下面的答案。 – 2010-08-30 17:18:32

回答

1

确定我知道最新情况。有用。 IE和其他浏览器不支持<optgroup>上的许多CSS属性。我假设你有这样的事情:

optgroup.hide {display:none;} 

上面的作品在Firefox但不在IE浏览器。我用firebug lite来看IE确实将'hide'类应用到了optgroup。然后我尝试将背景改为红色而不是显示:无,并且它在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> 
相关问题