0

<select>JavaScript でタグを操作すると、Internet Explorer 8 の奇妙な動作に遭遇します。

<option>を に追加したいとし<select>ます。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>

ページを開くと、2 つの選択ボックスが表示されます。1 つは通常の選択ボックスで、もう 1 つは jQuery のclone(). ボタンをクリックすると、両方にオプションが追加されます。両方の選択ボックスをクリックして開き、もう一度ボタンをクリックすると、最初の選択ボックスにのみ新しいオプションが追加されます。

このバグのある動作を回避する方法はありますか? <select>JavaScript で作成した にオプションを追加する必要があります。

4

2 に答える 2

0

解決策は回避することでしたclone()- どうやら Internet Explorer 8 では正しく動作しないようです。

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

そのため、を複製する代わりに <select>、新しいものを作成し、そのオプションのみを複製します。

于 2013-04-09T07:55:51.473 に答える