Javascript 显示隐藏所选选项触发第二选择选项然后第二选择选项触发隐藏显示div

这是我的代码：

<p><label for="category"><b>Services / Package</b></label>
<select name="category" id="category">
<option value="">-- select --</option>
<option value="GC">General</option>
<option value="RFU">Routine</option>
<option value="HPS">Health</option>
<option value="CRP">Corporate</option>
</select></p>
<!--Level 2 hide-->
<p id="gc" style="display: none;">
<label for="GC"><b>Select Doctor</b></label>
<select name="GC" id="GC">
<option value="">-- select --</option>
<option value="scheduleA">Dr A</option>
<option value="scheduleB">Dr B</option>
</select></p>
<p id="rfu" style="display: none;">
<label for="RFU"><b>Select Doctor</b></label>
<select name="RFU" id="RFU">
<option value="">-- select --</option>
<option value="scheduleA">Dr A</option>
<option value="scheduleC">Dr C</option>
</select></p>
<p id="hsp" style="display: none;">
<label for="HPS"><b>Select Package</b></label>
<select name="HPS" id="HPS">
<option value=" ">-- select --</option>
<option value="msg">Package D</option>
<option value="msg">Package E</option>
</select></p>
<!--Level 3 Show hide-->
<p id="CRP" style="display: none;">Please state at remark</p>
<p id="scheduleA" style="display: none;">Table schedule A</p>
<p id="scheduleB" style="display: none;">Table schedule B</p>
<p id="scheduleC" style="display: none;">Table schedule C</p>
<p id="msg" style="display: none;">Please go to this website</p>

有人能帮我在这个代码上创建jquery或javascript吗

我尝试过使用jquery，但不得不与其他jquery结合使用，结果似乎无法解决问题

我已经做好了准备 这里的问题是： -从第一选择选项中选择 -从第二个选择选项中选择 -电视节目 -在第一个选择选项中直接再次选择

---

-div卡在那里，它不会隐藏，除非我转到上一个选项选择null，然后它就消失了

在从中选择选项时，是否要显示第二个下拉框 第一个下拉列表框？ 通过更改第一个下拉菜单的选项，第二个下拉菜单选择的选项将被取消选择或重置

---

不确定。请澄清。

我不明白您的问题@laugh中div在哪里我无法将div放在小提琴中，因为它使用了与下拉框jquery不同的其他jquery。选择第一个下拉框后，它将显示第二个下拉框，然后选择第二个下拉框将显示div，但是故事是当你离开你在第二个下拉框中选择的一个，直接在第一个下拉框中再次选择时，div被卡在那里它不会隐藏。你应该重置第二个下拉框的值，而一旦更改第一个下拉框，div就会隐藏。如何重置它，我对两个下拉框都使用更改功能，目前，我必须选择空的第二个下拉框来隐藏div。在没有选择null选项的情况下，是否有任何地方可以重置它？请尝试，document.getElementById2nd下拉列表id.selectedIndex=-1；我在这里找到了答案