We help IT Professionals succeed at work.

jquery show/hide options in form

movieprodw
movieprodw asked
on
Hello,

I have the following form setup and can not figure out how to make it so when the category is chosen it shows the options relating in the lower select.

I have the jquery library linked on the page FYI.

<form id="select-form">
	<select id="parent-select">
        <option class="options1" value="cat0ne">First Category</option>
        <option class="options2" value="cat2wo">Second Category</option>
        <option class="options3" value="cat3hree">Third Category</option>
    </select>
    <select id="options">
        <option class="option1" value="yuil">This option yuil</option>
        <option class="option1" value="ly">This option ly</option>
        <option class="option2" value="hmfgh">This option hmfgh</option>
        <option class="option3" value="weg">This option weg</option>
        <option class="option1" value="fghjfg">This option fghjfg</option>
        <option class="option2" value="afdg">This option afdg</option>
        <option class="option3" value="erty">This option erty</option>
        <option class="option2" value="ndf">This option ndf</option>
        <option class="option1" value="trhe">This option trhe</option>
        <option class="option2" value="fgh">This option fgh</option>
        <option class="option3" value="ashgh">This option ashgh</option>
        <option class="option3" value="weaf">This option weaf</option>
        <option class="option3" value="asdf">This option asdf</option>
        <option class="option1" value="we">This option we</option>
        <option class="option1" value="fd">This option fd</option>
        <option class="option2" value="fds">This option fds</option>
        <option class="option1" value="asdf">This option asdf</option>
    </select>
</form>

Open in new window

Comment
Watch Question

View Solution Only

Most Valuable Expert 2013
Awarded 2012
Commented:
Hi,
the following might be a good starting point:
$(document).ready(function() {
    $("#parent-select").change(function() {
        var selectVal = $("option:selected", this).attr("class");
        selectVal = selectVal.replace("options","option");
        $("#options option").each(function() {
            if ($(this).attr("class") == selectVal) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        // Select first visible option
        //$('#options option:first-child').attr("selected", "selected");
    });
    
});

Open in new window


Live sample:
http://jsfiddle.net/EE_RainerJ/doxg9g2f/

Only open topic is to re-select the first visible element in the remaining options.
HTH
Rainer
movieprodw

Author

Commented:
Perfect, thank you