我有一个我试图创建的预订表格，其中涉及一个 jquery datepicker 和一些下拉列表。我想为用户提供从日历中选择日期的选项，然后根据他们在日历中选择的日期隐藏或显示其下方的几个下拉列表。每个下拉列表一个接一个地显示，但在用户在日期选择器中进行选择之前都是隐藏的。每天都有一个下拉列表，有不同的选项。
我可以让表单根据用户在日期选择器中的选择来显示/隐藏每个下拉列表，但我遇到的问题是每个不同的选择，相应的下拉框会根据实际下拉列表的位置在页面上随机播放。
我如何使它无论显示什么下拉列表，它总是显示在同一行上？如果这有意义吗？
HTML 表单：
<input type="text" id="datepicker" />
<div class="hide" id="hide1">
<div class="input select">
<select name="select1" id="Monday">
<option value="1" selected="selected">(Monday)</option>
<option value="2">10am - 12pm</option>
<option value="3">1pm - 3pm</option>
</select>
</div></div>
<br />
<div class="hide" id="hide2">
<div class="input select">
<select name="select2" id="Tuesday">
<option value="1" selected="selected">(Tuesday)</option>
<option value="2">10am - 3pm</option>
<option value="3">7:30pm - 10pm</option>
</select>
</div></div>
<br />
<div class="hide" id="hide3">
<div class="input select">
<select name="select3" id="Wednesday">
<option value="1" selected="selected">(Wednesday)</option>
<option value="2">10am - 3pm</option>
</select>
</div></div>
<br />
<div class="hide" id="hide4">
<div class="input select">
<select name="select4" id="Thursday">
<option value="1" selected="selected">(Thursday)</option>
<option value="2">10am - 3pm</option>
</select>
</div></div>
<br />
<div class="hide" id="hide5">
<div class="input select">
<select name="select5" id="Friday">
<option value="1" selected="selected">(Friday)</option>
<option value="2">1pm - 3pm</option>
<option value="3">4pm - 6pm</option>
<option value="4">7:30pm - 10pm</option>
</select>
</div></div>
<br />
<div class="hide" id="hide6">
<div class="input select">
<select name="select6" id="Saturday">
<option value="1" selected="selected">(Saturday)</option>
<option value="3">1:30pm - 3:30pm</option>
<option value="4">8pm - 10pm</option>
</select>
</div></div>
<div class="hide" id="hide7">
<div class="input select">
<select name="select7" id="Sunday">
<option value="1" selected="selected">(Sunday)</option>
<option value="2">10am - 12pm</option>
<option value="3">1:30pm - 3:30pm</option>
</select>
</div></div>
jquery函数隐藏/显示下拉列表
$(document).ready(function(){
$("#datepicker").change(function(){
if ($(this).val() == "Monday" ) {
$("#hide1").slideDown("fast"); //Slide Down Effect
} else {
$("#hide1").slideUp("fast"); //Slide Down Effect
}
if ($(this).val() == "Tuesday" ) {
$("#hide2").slideDown("fast"); //Slide Down Effect
} else {
$("#hide2").slideUp("fast"); //Slide Down Effect
}
if ($(this).val() == "Wednesday" ) {
$("#hide3").slideDown("fast"); //Slide Down Effect
} else {
$("#hide3").slideUp("fast"); //Slide Down Effect
}
if ($(this).val() == "Thursday" ) {
$("#hide4").slideDown("fast"); //Slide Down Effect
} else {
$("#hide4").slideUp("fast"); //Slide Down Effect
}
if ($(this).val() == "Friday" ) {
$("#hide5").slideDown("fast"); //Slide Down Effect
} else {
$("#hide5").slideUp("fast"); //Slide Down Effect
}
if ($(this).val() == "Saturday" ) {
$("#hide6").slideDown("fast"); //Slide Down Effect
} else {
$("#hide6").slideUp("fast"); //Slide Down Effect
}
if ($(this).val() == "Sunday" ) {
$("#hide7").slideDown("fast"); //Slide Down Effect
} else {
$("#hide7").slideUp("fast"); //Slide Down Effect
}
});
});