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>

第二个菜单只显示选择其中任何一个...

小提琴：https://jsfiddle.net/wazzahenry/6af6jd83/

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

在第一次选择的更改时显示第二个下拉菜单

1 个答案: