Question

在使用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>添加选项。

Answer 1

试试这个：

new Object($("select.prototype"))

Answer 2

解决方案是避免clone() - 显然它在Internet Explorer 8中无法正常运行。

var select = $('<select></select>');
select.append($("select.prototype option").clone());
container.append(select);

因此，我不是克隆<select>，而是创建一个新的，只克隆其选项。

打开后无法用JavaScript操纵select标签

2 个答案: