I\'ve realized that Chrome, it seems, will not allow me to hide in a
. Firefox will.
I need to hide the
Select inputs are tricky in this way. What about disabling it instead, this will work cross-browser:
$('select').children(':nth-child(even)').prop('disabled', true);
This will disable every-other <option>
element, but you can select which ever one you want.
Here is a demo: http://jsfiddle.net/jYWrH/
Note: If you want to remove the disabled property of an element you can use .removeProp('disabled')
.
You could save the <option>
elements you want to hide in hidden select element:
$('#visible').on('change', function () {
$(this).children().eq(this.selectedIndex).appendTo('#hidden');
});
You can then add the <option>
elements back to the original select element:
$('#hidden').children().appendTo('#visible');
In these two examples it's expected that the visible select element has the id of visible
and the hidden select element has the id of hidden
.
Here is a demo: http://jsfiddle.net/jYWrH/1/
Note that .on()
is new in jQuery 1.7 and in the usage for this answer is the same as .bind()
: http://api.jquery.com/on