hide currently selected listbox element - works with mozilla not with chrome

Question

On the web page I have a listbox with a few items in it. The line:

    $('#my-list-of-options option:selected').hide();

successfully hides the element currently selected element in mozilla. Not in chrome though. How can I get it to work in chrome?

PSL · Accepted Answer · 2013-05-30T00:50:07.230

1

display:none does not work across browser for option. You can try to make the option disabled

 $('#my-list-of-options option:selected').prop('disabled',true);

Or remove the option and rebind it when required. Save it in the select data for latter restore, something like this.

edited May 30 '13 at 00:50

answered May 30 '13 at 00:43

PSL

That does disable the option but it's still visible. Ideally I'd like to make it disappear altogether but without physically removing it from the list. – Ya. May 30 '13 at 00:50
Yes thats what disabled do. try the second solution. – PSL May 30 '13 at 00:51
1

This may not be the answer you wanted, but its the correct one. – j_mcnally May 30 '13 at 00:51
@Ya. also if you want to restore a particular option you can easily apply selector on the stored `data` and extract it out, or filter out the unwanted and populate them. – PSL May 30 '13 at 00:53
I intended to mark yours. – Ya. May 30 '13 at 01:20
@Ya. ok. I was wondering what went wrong and what you were expecting.. :) – PSL May 30 '13 at 01:23

score 1 · Answer 2 · answered May 30 '13 at 00:55

The css display:none on option elements is not supported in chrome (or ie).

The only choice is to remove the element:

$('#toppings').change(function(){
    var selected = $('#toppings option:selected');    
    selected.remove();    
});

score 0 · Answer 3 · answered May 30 '13 at 00:41

0

Here is a great refcard on jQuery selectors (though may have to sign up to download it).

$('#my-list-of-options option[selected]').hide();

answered May 30 '13 at 00:41

Shadow Man

3 Answers3