Question

我正在尝试根据2种不同的下拉选项显示隐藏字段，但我无法显示第3项。

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;
}

根据第二次下拉菜单，我试图显示特定文字。

示例：
实验室血液样本收集¥45 CPT：12345

我尝试添加特定的id（lab1-10等），但是当我这样做时，它会破坏第一部分。我不知道我是否可以使用＆＃39; viewSelector＆＃39;再次，或者如果我的问题存在于其他地方，但我将不胜感激任何帮助/指导。

Answer 1

事件未从第二个下拉列表触发的原因是jQuery仅在您使用ID时选择一个元素。如果将“viewSelector”更改为某个类，则将为该类的任何对象触发该事件。

类似的东西：

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

然后：

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

Answer 2

您需要将onChange事件侦听器添加到第二级下拉列表。下拉值更改后，您将显示标签。

为了能够为每个下拉列表添加侦听器，每个第二级下拉列表都需要不同的ID。或者，就像@B-H提到的那样，如果DOM中有多个具有相同id的元素，jQuery将只选择第一个。

JSFiddle示例。（代码没有优化，但显示了想法）

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

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

多个显示/隐藏Div

2 个答案: