2

うーん、これは楽しいものでした。

そこで先日、Internet Explorer 9 に矛盾があることを発見し、壁にぶつかりました。ほとんどの Web 開発者は、IE の開発者ツールを使用したスクリプトのデバッグが素晴らしいことを知っているため、FireFox と Chrome で動作したことにがっかりしました。

これは、select 要素にオプションを動的に追加しようとしたときに、そのオプションにフォーカスしようとしたときに発生しました。IE は、新しい要素にフォーカスするための呼び出しを無視しているように見えました。問題を説明するために、2 つの例を示します。

最初のシナリオ (IE で動作しないシナリオ)

2 つのオプションを持つ select から始めます。

<select id="select">
    <option>option 1</option>
    <option>option 2</option>
</select>

.attr()次に、JQuery を使用して選択に新しいオプションを追加し、メソッドを使用して選択しようとします。

var $newOpt = $('<option>New Option</option>');
var $select = $('#select');
$select.prepend($newOpt);
$newOpt.attr('selected','selected');

Firefox と Chrome では、これは期待どおりに機能します。私のオプションが選択に追加され、フォーカスされます。ただし、Internet Explorer では、オプションは追加されるだけで、フォーカスされません。(以下のデモを参照)

最初のシナリオのデモンストレーション

第二のシナリオ

デフォルトで「オプション 1」に焦点を当てて、3 つのオプションを選択することから始めます。

<select id="select">
    <option>option 1</option>
    <option>option 2</option>
    <option id="new">New Option</option>
</select>

JQuery を使用して New Option にフォーカスします。

var $newOpt = $('#new');
$newOpt.attr('selected','selected');

興味深いことに、これは Internet Explorer 9、FireFox、および Chrome の 3 つのブラウザーすべてで機能します。(以下のデモを参照)

2 番目のシナリオのデモンストレーション

回避策

当時、この問題に非常に複雑な問題があったため、当初はそれほど明白ではなかった回避策を最終的に見つけました。私は最終的に使用しました：

$select.children().removeAttr('selected');

新しく追加されたオプションにフォーカスする前に、選択したすべての属性を選択から削除します。

回避策のデモ

質問

私はウェブを検索してきましたが、これがどこにも文書化されていないので、疑問に思っています。バグですか？もしそうなら、それは JQuery または Internet Explorer のバグですか? そうでない場合、attr()メソッドを間違って使用していますか?

誰かがこれに光を当てることができれば、それは素晴らしいことです. ありがとう！

4

2 に答える 2

2

を使ってみてくださいselectedIndex。

$(function () {
    var $newOpt = $('<option>New Option</option>');
    $('#select').prepend($newOpt).prop('selectedIndex', 0);
});

デモ

jqueryで修正されていない長期にわたるIEのバグのようです。

ただし、これはIEで機能します

 $(function () {
    var newOpt = document.createElement('OPTION');
    newOpt.innerHTML = 'New Option';
    var select = document.getElementById('select');
    select.add(newOpt,select.options[0]);
    $('#select option:first').prop('selected', true);
});

デモ

。追加

于 2013-06-04T01:24:35.757 に答える
0

ここで、この方法で試すことができます..

関数 addItem(){

var newOpt = $('<option selected="selected">New Option</option>');
$('#select').append(newOpt);

}

それはどこでも機能します...

ここをチェック

于 2013-06-04T02:28:04.577 に答える