在使用JavaScript操作<select>
标记时,我遇到了Internet Explorer 8的奇怪行为。
假设我想在<option>
中添加<select>
,而在jQuery中我可以使用$("select").prepend(myOption)
之类的内容。但是,如果使用JavaScript AND 创建<select>
元素,则用户已打开选择,这不起作用,Internet Explorer(8)不显示新选项。在Firefox中,这很好用。
一个例子:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
function prependOption(select) {
$("select").each(function(i, element) {
var option = $('<option value="abc">xyz</option>');
$(element).prepend(option);
});
}
$(function() {
var container = $("#container");
container.append($("select.prototype").clone());
});
</script>
</head>
<body>
<input type="button" value="Click" onclick="prependOption(this)" /><br />
<div id="container">
<select class="prototype">
<option>Lorem ipsum</option>
</select>
</div>
</body>
</html>
当你打开页面时,你会看到两个选择框 - 一个是正常的,另一个是使用jQuery的clone()
创建的。如果单击该按钮,则会向两个选项添加一个选项。现在,如果单击并打开两个选择框并再次单击该按钮,则只会向第一个选择框添加一个新选项。
任何想法如何解决这个错误的行为?我需要为使用JavaScript创建的<select>
添加选项。
答案 0 :(得分:0)
试试这个:
new Object($("select.prototype"))
答案 1 :(得分:0)
解决方案是避免clone()
- 显然它在Internet Explorer 8中无法正常运行。
var select = $('<select></select>');
select.append($("select.prototype option").clone());
container.append(select);
因此,我不是克隆<select>
,而是创建一个新的,只克隆其选项。