Question

In a perfect world (Firefox) I could just use the .toggle option and be done with it. However, IE and Chrome aren’t able to access option elements. By using .wrap(”), I am able to 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’m having issues figuring out the correct flow.

MC

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/