Скрыть опцию выбора, не отражающую

Question

Я пытаюсь скрыть некоторые параметры из выбранного. Используемый раствор таков:

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

это.selectBox - объект jQuery указанного выбора.

В Firefox это работает отлично, но в IE8 изменения не отражаются: если нужно взглянуть на выбор, он будет казаться неизменным. Но если пользователь выбирает параметр, значение соответствует удаляемому элементу.

Вот пример:

<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/

работает как и должно быть на том же браузере.

Я не понимаю, почему это внезапно происходит.

Почему это происходит? Где я должен искать этот вопрос?

Answer 1

Я не уверен, почему вы хотите скрыть эту опцию вместо ее удаления, но вот пример того, как вы можете это сделать. Он основан на this solution для скрытия опций.

Fiddle здесь ->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 
});