显示/隐藏多个 Div

Question

I am trying to show hidden fields based on 2 different drop-down selections, but I can't get the 3rd item to show up.

JSFiddle: https://jsfiddle.net/8cdLbetv/2/

Javascript:

$(document).ready(function () {
    $.viewMap = {
        '0': $([]),
        'view0': $('#view0'),
        'view1': $('#view1'),
        'view2': $('#view2'),
        'view3': $('#view3'),
        'view4': $('#view4')
    };

    $('#viewSelector').change(function () {
        // hide all
        $.each($.viewMap, function () { this.hide(); });
        // show current
        $.viewMap[$(this).val()].show();
    });
});

HTML:

<select id="viewSelector">
    <option selected value="view0">-- Select a Service --</option>       
    <option value="view1">Laboratory</option>
    <option value="view2">X-Ray</option>
    <option value="view3">MRI</option>
    <option value="view4">CT</option>
</select>
<div id="view1" class="hidden"><br>
    <select id="viewSelector">
        <option selected value="view0">-- Select a Procedure --</option>       
        <option value="lab1">Collection of Blood Specimen</option>
        <option value="lab2">CBC Including Platelets</option>
        <option value="lab3">Complete Metabolic Panel</option>
        <option value="lab4">Basic Metabolic Panel</option>
        <option value="lab5">Thyroid Stimulating Hormone</option>
        <option value="lab6">Prothrombin Time (Finger)</option>
        <option value="lab7">Lipid Panel</option>
        <option value="lab8">Hemoglobin A1C</option>
        <option value="lab9">Urinalysis (Complete)</option>
        <option value="lab10">Hemogram (CBC w/o Diff)</option>
    </select>
</div>
<div id="view2" class="hidden"><br>
    <select id="viewSelector">
        <option selected value="view0">-- Select a Procedure --</option>       
        <option value="rad1">Chest (PA LAT)</option>
        <option value="rad2">Chest (1 View)</option>
        <option value="rad3">Knee Complete (Min 4 View)</option>
        <option value="rad4">Abdomen Complete (2 View)</option>
        <option value="rad5">Hip (2 View)</option>
        <option value="rad6">Pelvis</option>
        <option value="rad7">Lumbosacral Survey (2/3 View)</option>
        <option value="rad8">Foot (Min 3 View)</option>
        <option value="rad9">L-Spine Flex/Ext</option>
        <option value="rad10">Ankle (3 View)</option>
    </select>
</div>
<div id="view3" class="hidden"><br>
    <select id="viewSelector">
        <option selected value="view0">-- Select a Procedure --</option> 
        <option value="mri1">Lower Extremity Joint W/O Contrast</option>
        <option value="mri2">Lumbar Spine W/O Contrast</option>
        <option value="mri3">Brain With W/O Contrast</option>
        <option value="mri4">Upper Extremity With W/O Contrast</option>
        <option value="mri5">Lumbar Spine With W/O Contrast</option>
        <option value="mri6">Brain W/O Contrast</option>
        <option value="mri7">Cervical Spine W/O Contrast</option>
        <option value="mri8">Thoracic Spine W/O Contrast</option>
        <option value="mri9">Cervical Spine With W/O Contrast</option>
        <option value="mri10">Lower Extremity No Joint W/O Contrast</option>
    </select>
</div>
<div id="view4" class="hidden"><br>
    <select id="viewSelector">
        <option selected value="view0">-- Select a Procedure --</option> 
        <option value="ct1">Head W/O Contrast</option>
        <option value="ct2">Abdomen/Pelvis With Contrast</option>
        <option value="ct3">Chest With Contrast</option>
        <option value="ct4">Chest W/O Contrast</option>
        <option value="ct5">C-Spine W/O Contrast</option>
        <option value="ct6">Chest With W/O Contrast</option>
        <option value="ct7">Kidney Stone Search Abdomen</option>
        <option value="ct8">Abdomen/Pelvis W/O Contrast</option>
        <option value="ct9">Neck With Contrast</option>
        <option value="ct10">Lower Extremity W/O Contrast</option>
    </select>
</div>
<div id="lab1" class="hidden"><br>
    <p>
    List Price
    </p>
</div>

CSS:

.hidden {
    display: none;
}

#view0 {
    color: #FFFFFF;
    padding-bottom: 22px;
}

Based on that second drop-down, I am trying to show specific text.

Example:
Laboratory
Collection of Blood Specimen
$45 CPT: 12345

I have tried adding the specific id's (lab1-10, etc), but when I do that, it breaks the first section. I don't know if I can't use 'viewSelector' again, or if my problem resides elsewhere, but I would appreciate any help/guidance.

Answer 1

The reason that the event isn't triggering from the second dropdown is that jQuery only selects one element when you use an ID. If you change 'viewSelector' to a class, the event will fire for any object with that class.

Something like:

<div id="view1" class="hidden"><br>
    <select class="viewSelector"> ...

And then:

$('.viewSelector').change( ...

Answer 2

You need to add onChange event listener to the second level dropdowns. Once the dropdown value changed, you show the label.

To be able to add listener to each dropdown, you need different id for every second level dropdown. Or, like @BH mentioned, jQuery will only select the first one if there are multiple elements with the same id in the DOM.

JSFiddle example. (Code is not optimized, but show you the idea)

  $('#viewSelector1').change(showResult);
  $('#viewSelector2').change(showResult);
  $('#viewSelector3').change(showResult);
  $('#viewSelector4').change(showResult);

  function showResult(){
    $('#lab1').show();
  }