0

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?

Dragos
  • 2,911
  • 12
  • 39
  • 55
  • are you doing this inside the success: portion of an ajax call? – Mike C. Mar 29 '13 at 13:41
  • `this.selectBox.children(".myOption_"+optionValue).hide()` if you just want to hide some options with class 'myOption_'+optionValue() `.remove()` to remove – Joel Harkes Mar 29 '13 at 13:43
  • @MikeC. No, it is inside a handler for the "change" event. The handler is attached with jQuery("..").on(...). – Dragos Mar 29 '13 at 13:44
  • if you look at that fiddle you notice that it's not just a span wrap you also have changes to style display:none put your code in a fiddle for people to be able to see what is wrong with the code. – Astronaut Mar 29 '13 at 13:47
  • @joelharkes the ".hide()" function does not work on "option" elements in IE8. Here is where I got my solution: http://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery – Dragos Mar 29 '13 at 13:47

1 Answers1

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
});
Community
  • 1
  • 1
plalx
  • 42,889
  • 6
  • 74
  • 90
  • I am hiding it in order to be able to later display it at the same position. I cannot run your code on IE8(that jsfiddle page is not displayed right) but the solution seems to be just like mine. I am starting to think that the source of the problems might be somewhere else. Do you have any suggestions? – Dragos Mar 29 '13 at 14:42
  • @Dragos I have re-written the example for JSBin [here](http://jsbin.com/uyuram/1) and tried to run it in IE8 compatibility mode from IE10. It seems to work well... does it works for you as well? – plalx Mar 29 '13 at 15:13