1

テキストが入力ボックスに追加されるときに、jQueryを使用してselect要素にオプションを追加しています。

FireFoxとChromeでは、テキストが追加されるとすぐに選択が更新され、選択を1回クリックすると、期待どおりに新しいオプションが表示されます。IEでは、入力するとすぐにデフォルトのオプションが表示されますが、最初にクリックすると、追加のオプションは表示されません。選択を2回クリックすると、新しいオプションが表示されます。

ChromeやFFのようにIEをすぐに更新するにはどうすればよいですか？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('paste mouseup keyup change', 'input', function () {
            updateOptions();
        });

        function updateOptions() {
            setTimeout(function () {
                if ($('input').val().length > 0) {
                    newOptions = '<option>' + $('input').val() + '</option><option>A</option><option>B</option><option>C</option>';
                } else {
                    newOptions = '<option></option>'
                }
                $('select').empty().append(newOptions);
            }, 0);
        }
    });
</script>
<input type="text"/>
<select>
    <option>before</option>
</select>

タイムアウトは貼り付けイベント用です。サンプルはhttp://jsfiddle.net/c7G6L/4/で見ることができます

私はいくつかのSOソリューションを試しました：JQueryからのDIVスワップ-動的選択とオプションはIE9で機能しませんが、それはFireFoxに問題を与えるように見えました。

オプションの追加から選択を再描画してフォーカスIE9で選択しても、違いはありませんでした

innerHTMLの代わりにjQueryhtmlとappendを使用するJQueryがIEの選択オプションを変更しないのはなぜですか？

4

1 に答える 1

0

問題は、イベントハンドラーが貼り付け、マウスアップ、キーアップ、および変更を監視していることです。どういうわけかそれはIEを混乱させました。リストから「変更」を削除すると、問題が修正されました。とにかく、この場合、変更は冗長でした。

$(document).on('paste mouseup keyup', 'input', function () {
    updateOptions();
});
于 2013-01-30T23:07:16.280 に答える