Select "Option" Div Hide/Show using JQuery

Question

I am trying to create an auto hide/show function for when someone selects a certain "option" on a select element. Here's what I have for the "selector":

<li id="foli16" class="name notranslate">
                    <label class="desc" id="title16" for="Field16">
                        Repeat Pattern
                        <span id="req_16" class="req"></span>
                    </label>
                    <span class="left">
                        <select id="Field16" style="margin-left: 0px;" name="" class="field select">
                            <option value="" <?php echo $doc_selected; ?>>None</option>
                            <option value="" <?php echo $doc_selected; ?>>Daily</option>
                            <option value="" <?php echo $doc_selected; ?>>Weekly</option>
                            <option value="" <?php echo $doc_selected; ?>>Monthly</option>
                            <option value="" <?php echo $doc_selected; ?>>Yearly</option>
                        </select>
                    </span>
                    <p class="instruct" id="instruct16"><small>How often does this test occur?</small></p>
                </li>

When someone selects the "daily" option, I want the div with the id of "daily" to show. If they select a different one, it needs to close the visible one and show the new selection.

I have done this before with click buttons and a single toggle, but I am unsure how to write this for such a large toggle, especially using a select "option". I assume my options will need ID's as well.

Answer 1

You have 5 option elements, if you have 5 target elements that should be hidden/shown according to the selected option, you can add a class to your target elements and use eq and index methods:

var $targets = $('.theTargets');

$('#Field16').change(function(){
    var i = $('option:selected', this).index();
    $targets.hide().eq(i).show();
});

In case that you want to select the target element by ID:

$(function(){
    var $targets = $('.theTargets'); // If they have a common class name

    $('#Field16').change(function(){
        var id = this.value.toLowerCase();
        $targets.hide().filter('#' + id).show();
    })
})