Issues with jQuery.hide () ListBox in Internet Explorer

Question

In an ideal world (Firefox), I could just use the .toggle option and do with it. However, IE and Chrome cannot access parameter elements. Using .wrap (''), I can successfully hide in all browsers.

$(document).ready(function () { $('#lstAvailRates option').wrap('<span>').hide(); $('#btnToggle').click(function () { $('#lstAvailRates option').unwrap('<span>').show(); }); }); 

Ideally, I would like #btnToggle to be able to toggle show / hide. However, I am having trouble figuring out the correct flow.

MS

Answer 1

You could do

 $(document).ready(function() { $('#lstAvailRates option').wrap('<span>').hide(); $('#btnToggle').click(function() { //if there are option element that are direct children of the select if($('#lstAvailRates > option').length){ //wrap them and hide them $('#lstAvailRates option').wrap('<span>').hide(); }else{ //otherwise unwrap them and show them $('#lstAvailRates option').unwrap('<span>').show(); } }); });​ 

fiddle here http://jsfiddle.net/GX68J/