Hide select option not reflecting

Question

I am trying to hide some options from a select. The solution used is this:

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

this.selectBox is a jQuery object of the mentioned select.

In Firefox it works just fine, but in IE8 the changes are not reflected: if one should look at the select, it will seem unchanged. But if the user selects an option, the value respects the removed element.

Here is an example:

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

Now, when I select "Test1", a function is called and the above code is executed. From the user's perspective, the options will remain the same. BUT if he now tries to select "Test1" again, the provided value will actually be "val2" and the option should be removed. Again, nothing happens, so he selects "Test1" again and the value will be "val3" and so on.

In order to display the occured changes, I have to hide and then show the select.

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

The code above will make the changes visible(hide the clicked options).

What is more curious is that this fiddle:

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

works as it should on the same browser.

I do not understand why is this all of a sudden happening.

Why is this happening? Where should I look for the issue?

Answer 1

I am not sure why you would want to hide the option instead of removing it, but here's an example on how you can do it. It's based on this solution for hiding options.

Fiddle here -> http://jsfiddle.net/kAp42/2/

JSBin here (should work in 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
});