show hide选择的选项触发第二个选择选项然后第二个选择选项触发隐藏显示div

时间:2013-05-16 08:01:42

标签: javascript jquery select

以下是我的代码:

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

我已尝试使用http://jsfiddle.net/FvMYz/并且必须与其他jquery结合似乎结果无法解决问题

我做http://jsfiddle.net/6rTa5/ 问题在这里: - 从第一选择选项中选择 - 从第二选择选项中选择 - div show - 在1st 1st选项中再次直接选择 - div被卡在那里它没有隐藏,除非我前一个选项选择null然后它消失了

1 个答案:

答案 0 :(得分:0)

您是否希望在从中选择选项时显示第二个下拉框 第一个下拉列表框?  通过更改第一个下拉选项,第二个下拉选择选项是要取消选择还是重置?

不确定。请说清楚。