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>
加载中,请稍侯......
精彩评论