此 HTML 在 Chrome 中完全有效,但在 IE 中无效。
该文件非常简单,只有两个函数:
点击添加按钮,第一行将被克隆并放置在添加按钮之前。
单击组合框,第二个选项将被删除。
现在问题是函数2:
在 IE 中,加载此页面,然后单击添加按钮添加一些组合框。
单击第一个组合框,您将不会在组合框中看到第二个选项。 (这是正确的结果。)
单击第二个组合框或其他克隆的组合框,然后您将看到第二个选项仍在组合框中,因此它没有被删除。 (这不是正确的结果。)
如果您在开发者工具中查看源代码,您可以看到第二个选项已被删除。
那么,如何去掉IE中的该选项呢?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(document).ready
(
function()
{
$('#add').click(function(){
$(this).parent().parent().before($('tr').eq(0).clone(true));
});
$('select').focus(function(){
$(this).find('option').eq(1).remove();
});
}
);
</script>
</head>
<body>
<table>
<tr>
<td>
<select>
<option>1</option><option>2</option><option>3</option>
</select>
</td>
</tr>
<tr>
<td><input id="add" type="button" value="add"/></td>
</tr>
</table>
</body>
</html>
最佳答案
第一个方法有效,因为事件处理程序附加到此时 DOM 中唯一的“选择”。然后,当您单击“添加”时,一个新的“选择”元素将添加到 DOM,但该元素没有附加任何事件处理程序。我可能误解了你的问题,如果是这样的话请告诉我。
如果您提供明确的规范,我可以写一个简短的示例来说明如何完成它。
关于javascript - 删除 HTML 选择中的选项,结果在 IE 上不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10297322/