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

我正在尝试创建一个下拉列表，当选择第一个时，该下拉列表将显示第二个

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

如果选择了这两个菜单中的任何一个，第二个菜单都不会显示

小提琴：

基于此： 从这个问题：

您有一个样式：对于您的多重选择，无。要解决此问题，请使用$+correspondingID.show；，我宁愿改变元素的样式。 您正在用espace字符声明您的id。这就好像是在为同一个元素声明不同的ID。为了解决这个问题，我删除了ID中的空格字符。 $prob\u type\u 1.changefunction{ var correspondingID=$this.find:selected.val $.warren.hide； correspondingID=correspondingID.replace， $+对应的ID.css显示，继承； } 选择问题类型 -请选择- SS-20器械 BBoxx设备 选择设备 灯 电视机 选择设备 灯 电视机 BBoxx收音机 Bboxx USB多充电器

---

你不能在ID或类名中使用空格。我再也回不去这两个小时了：/Ha。恐怕有两个人要来@瓦扎亨利，你可以在下面看到我的工作片段