求html.option.style.display IE的解决办法最近发现如果在option下用style.display的时候，在firefox下正常，但是在IE下就不正常。
请看
click
在firefox下，点击下面的show/hide，下拉菜单会相应的变化，在IE下则不会。
请问达人，在IE下要怎么做才有跟firefox一样的效果？
[icky (6-17 13:34, Long long ago)]
[ 传统版 |
sForum ][登录后回复]1楼
原code如下<html>
<head>
<script type="text/javascript">
function show_hide(id) {
if (document.getElementById(id).style.display == 'block')
document.getElementById(id).style.display = 'none';
else if (document.getElementById(id).style.display == 'none')
document.getElementById(id).style.display = 'block';
document.getElementById('opt').value = 0;
}
</script>
</head>
<body>
<div style="height: 100px"></div>
<form>
<select id="opt" name="option">
<option id="opt0" value=0 style="display: block">default</option>
<option id="opt1" value=1 style="display: block">first option</option>
<option id="opt2" value=2 style="display: block">second option</option>
<option id="opt3" value=3 style="display: block">third option</option>
<option id="opt4" value=4 style="display: block">fourth option</option>
</select>
</form>
<table>
<tr><td>
<a onclick="show_hide('opt1')">show/hide first option</a>
</td></tr><tr><td>
<a onclick="show_hide('opt2')">show/hide second option</a>
</td></tr><tr><td>
<a onclick="show_hide('opt3')">show/hide third option</a>
</td></tr><tr><td>
<a onclick="show_hide('opt4')">show/hide fourth option</a>
</td></tr>
</table>
<div style="height: 800px"></div>
</body>
</html>[icky (6-17 13:35, Long long ago)]
[ 传统版 |
sForum ][登录后回复]2楼
(引用 icky:原code如下
function show_hide(id) {
if (document.getElementById(id).style.display == 'block')
document.getElementById(id).st...)这是IE的一个bug， 有几个workaround的方法你可以maintain几个array，然后每次都重建所有options或者用add/remove来动态添加/删除受影响的option：
<html>
<head>
<script type="text/javascript">
function show_hide(id, text) {
var op = document.getElementById(id);
var select = document.getElementById("opt");
if (op) {
select.remove(op.index);
return;
}
for (var i=0; i<select.length; i++) {
if (select.options[i].id > id) break;
}
op = document.createElement('option');
op.text=text;
op.id = id;
try {
select.add(op, select.options[i]); // firefox
}
catch (ex) {
select.add(op, i); // ie
}
}
</script>
</head>
<body>
<div style="height: 100px"></div>
<form>
<select id="opt" name="option">
<option id="opt0" value=0 style="display: block">default</option>
<option id="opt1" value=1 style="display: block">first option</option>
<option id="opt2" value=2 style="display: block">second option</option>
<option id="opt3" value=3 style="display: block">third option</option>
<option id="opt4" value=4 style="display: block">fourth option</option>
</select>
</form>
<table>
<tr><td>
<a onclick="show_hide('opt1', 'first option')">show/hide first option</a>
</td></tr><tr><td>
<a onclick="show_hide('opt2', 'second option')">show/hide second option</a>
</td></tr><tr><td>
<a onclick="show_hide('opt3', 'third option')">show/hide third option</a>
</td></tr><tr><td>
<a onclick="show_hide('opt4', 'fourth option')">show/hide fourth option</a>
</td></tr>
</table>
<div style="height: 800px"></div>
</body>
</html> [大树下 (6-17 15:21, Long long ago)]
[ 传统版 |
sForum ][登录后回复]3楼
(引用 icky:原code如下
function show_hide(id) {
if (document.getElementById(id).style.display == 'block')
document.getElementById(id).st...)建议用JS的framework, JQuery, Prototype 都不错
[moon9shine (6-17 16:41, Long long ago)]
[ 传统版 |
sForum ][登录后回复]4楼
(引用 大树下:这是IE的一个bug， 有几个workaround的方法你可以maintain几个array，然后每次都重建所有options或者用add/remove来动态添加/删除受影响�...)阁下真乃神人也[icky (6-17 17:31, Long long ago)] [ 传统版 | sForum ][登录后回复]5楼