javascript - 在更改第一个选定项时显示第二个下拉菜单

Question

我正在尝试创建一个下拉菜单，当第一个被选中时将显示第二个。

<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>

<div id="SS-20 Appliance" class="warren" style="display: none;"  onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>


<div id="BBoxx Appliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script>
    $("#prob_type_1").change(function(){
   correspondingID = $(this).find(":selected").val()
   $(".warren").hide();
   $("#" + correspondingID).show();
    })
</script>

第二个菜单没有显示其中的任何一个...

fiddle :https://jsfiddle.net/wazzahenry/6af6jd83/

基于此:http://jsfiddle.net/dKMzk/从这个问题:Show a second dropdown based on previous dropdown selection

Answer 1

• 您有一个用于多选的style: none。为了解决这个问题，我宁愿改变元素的样式，而不是使用 $("#"+ correspondingID).show();。
• 您正在使用空格字符声明您的 ID。这就好像你在为同一个元素声明不同的 id。为了解决这个问题，我删除了 id 中的空格字符。

$("#prob_type_1").change(function(){
   var correspondingID = $(this).find(":selected").val()
   $(".warren").hide();
   correspondingID = correspondingID.replace(" ", "")
   $("#" + correspondingID).css("display", "inherit");
    })

<div id="prob_type_1" name="prob_type_1">
<label>Select Problem Type</label>
<select class="form-control required" type="select" title="" id="prob_type_1" name ="prob_type_1">
<?php if ($client_db_number < 15000) { ?>
<option value = "">-Please Select-</option>
<option value = "SS-20 Appliance">SS-20 Appliance</option>
<option value = "BBoxx Appliance">BBoxx Appliance</option>
</select>
</div>

<div id="SS-20Appliance" class="warren" style="display: none;"  onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="SS-20 Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
</select>
</div>


<div id="BBoxxAppliance" class="warren" style="display: none;" onchange="ChangeDropdowns(this.value)">
<label>Select Appliance</label>
<select id="BBoxx Appliance" name ="prob_type_2">
<option value = "Lights">Lights</option>
<option value = "Television">Television</option>
<option value = "BBoxx Radio">BBoxx Radio</option>
<option value = "Bboxx USB Multi Charger">Bboxx USB Multi Charger</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>