打开后无法使用 JavaScript 操作选择标签

Cannot manipulate select tag with JavaScript after opening it

本文关键字：JavaScript 操作 选择 标签      更新时间：2023-09-26

在使用JavaScript操作<select>标签时，我遇到了Internet Explorer 8的奇怪行为。

假设我想为<select>添加一个<option>，而不是在jQuery中我可以使用类似$("select").prepend(myOption)的东西。但是，如果<select>元素是使用 JavaScript 创建的，并且用户已打开选择，则这不起作用，并且 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>添加选项。

试试这个：

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

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

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

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

相关文章：