0

選択からいくつかのオプションを非表示にしようとしています。使用されるソリューションは次のとおりです。

 this.selectBox.children(".myOption_"+optionValue).wrap("<span></span>");

this.selectBox は、前述の選択の jQuery オブジェクトです。

Firefox では問題なく動作しますが、IE8 では変更が反映されていません。select を見ると、変更されていないように見えます。ただし、ユーザーがオプションを選択すると、値は削除された要素を尊重します。

次に例を示します。

<option value="val1">Test1</option>
<option value="val2">Test2</option>
<option value="val3">Test3</option>
<option value="val4">Test4</option>

ここで、「Test1」を選択すると、関数が呼び出され、上記のコードが実行されます。ユーザーの観点からは、オプションは同じままです。しかし、もう一度「Test1」を選択しようとすると、指定された値は実際には「val2」になり、オプションを削除する必要があります。ここでも何も起こらないので、もう一度「Test1」を選択すると、値は「val3」などになります。

発生した変更を表示するには、選択を非表示にしてから表示する必要があります。

this.selectBox.children(".myOption_"+optionValue).wrap("<span></span>");
this.selectBox.hide().show();

上記のコードは、変更を表示します (クリックしたオプションを非表示にします)。

さらに興味深いのは、このフィドルです。

http://fiddle.jshell.net/FAkEK/25/show/

同じブラウザで正常に動作します。

なぜこれが突然起こったのか理解できません。

なぜこうなった？どこで問題を探す必要がありますか?

4

1 に答える 1

1

オプションを削除する代わりに非表示にする理由はわかりませんが、その方法の例を次に示します。オプションを非表示にするためのこのソリューションに基づいています。

ここでフィドル - > http://jsfiddle.net/kAp42/2/

JSBin はこちら (IE8 で動作するはずです) -> http://jsbin.com/uyuram/1

var $select = $('select');

$select.prop('selectedIndex', -1); //ensure we can hide the first option

$select.change(function () {
    //not sure why you would not want to remove the option instead of hiding it byt, if you want to hide... 
    $select.children('option:selected').wrap('<span class="hide-option"></span>');

    //remove it
    //$select.children('option:selected').remove();

    this.selectedIndex = -1; //ensure we can hide the last option
});
于 2013-03-29T14:23:45.260 に答える