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

时间:2013-04-04 13:24:32

标签: javascript jquery internet-explorer

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

2 个答案:

答案 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>,而是创建一个新的,只克隆其选项。