Hide option from Select in IE

Question

I have a requirement that says

Remove an option from the dropdown and if some users already have that value, then keep showing the value in select element as default value but still hide that in the dropdown. (User will able to see the value as default value but in the dropdown it won't show up.)

I have tried

$('#id').children('option[value="x"]').hide();

This solves my problem but this does not work in Internet Explorer. And if I use $('#id').children('option[value="x"]').remove() it will remove that option from DOM and the user who is already having that value will see some other value. Is there any workaround for this?

Answer 1

would be disabled="true" an option? It would be visible but the user can't select it.

Answer 2

This will hide the option in all browsers and disables if it can't hide.

$('.some-list option[id=someId]').attr('disabled', 'disabled').hide();

To show it again use:

$('.some-list option[id=someId]').removeAttr('disabled').show();