原code如下
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;
}
default
first option
second option
third option
fourth option
show/hide first option
show/hide second option
show/hide third option
show/hide fourth option
(more...)
这是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>
<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>
Huasing Association 1999 - 2013