CODEWITHSUNDEEP
jqueryforms
Joshc
Joshc

Reputation: 3853

How to hide html form select option?

I have a very simple form which I would like to hide select options when another select field refines it.

Currently I have tried dispay: none as an inline style on my options, but it does not hide it.

I am using chrome and this needs to work across all browsers. Can anyone shed some light as I can't seem to find much on google.


Please see my problem live here... http://jsfiddle.net/3vPgY/5/


And here my current code...

<form>
    <select id="refine">
        <option class="default" value="0">Please refine...</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
    </select>
    <select id="everything" disabled="disabled">
        <option class="default" value="">Please select</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
    </select>
</form>


And my jquery script that is suppost to filter the second dropdown...

$('#refine').change(function () {

    var refine = $('option:selected', this).val().replace(/ /g, "-");

    if (refine != 0) {

        $('#everything').removeAttr('disabled');
        $('#everything option:not(.default)').css('display', 'none');
        $('#everything .' + refine).css('display', 'block');

    } else {

        $('#everything').attr('disabled', 'disabled');
        $('#everything option:not(.default)').css('display', 'none');

    }

});


As you can see I only want to hide the options, not remove. This is so I can bring them back somehow if the first dropdown choice changes.

Any advice would be most helpful - or maybe a work around.


Thanks


http://jsfiddle.net/3vPgY/5/

Upvotes: 1

Views: 6485

Answers (4)

Joshc
Joshc

Reputation: 3853

In the end I used jquery clone, which seemed to do the trick.

http://jsfiddle.net/3vPgY/10/

var everything = $('#everything').clone(true);

$('#refine').change(function () {

    var selectColour = $('option:selected', this).val().replace(/ /g, "-");

    if (refine != 0) {

        var everythingRefined = everything.clone(true).find('.default,.'+selectColour);

        $('#everything').removeAttr('disabled');
        $('#everything').empty().append(everythingRefined);

    } else {

        $('#everything').attr('disabled', 'disabled');

    }

});

Upvotes: 1

BBagi
BBagi

Reputation: 2085

This is not the best way to do things, it's best to dynamically build your selects. HOWEVER, if you must do it this way, use the following code:

    $('#refine').change(function () {

        var selected = $(this).val();
        $("#everything option").wrap("<span style='display:none' />");
        $("#everything option." + selected).unwrap();
        $("#everything").attr('disabled',false);

});

I forked it here: http://jsfiddle.net/AyX9Q/

Bear in mind, the code is minimal, just to show you how to wrap options in spans and hide them. It doesn't do any logic to show all options if you revert to the "please select" on the first select.

Upvotes: 0

Zefira
Zefira

Reputation: 4519

I think the easier way to accomplish what you have in mind is to have three different dropdown lists in place of the second dropdown. Then, the first drop down can choose which one of those to show based on it's value.

Much simpler.

With that change, you can make your callback simply:

$('#refine').change(function () {
    var refine = $('option:selected', this).val().replace(/ /g, "-");

    $('.refined').removeClass('hidden').addClass('hidden');
    $('#'+refine).removeClass('hidden').removeAttr('disabled');
});

Edit: I forked your fiddle (and maybe edited your original?). It has the changes I suggested.

Upvotes: 1

scrappedcola
scrappedcola

Reputation: 10572

You cannot hide/remove individual options, only apply the attribute disabled on them. They will appear grey'ed out but won't be selectable.

You could progmatically keep a variable object that has all the data for the default configuration of the select. Then when you need to remove options you can but still have a way to know what needs to go into the select when all your conditions align.

Upvotes: 0

Related Questions