作成しようとしている予約フォームがあります。これには、jquery datepicker といくつかのドロップダウン リストが含まれます。カレンダーから日付を選択するオプションをユーザーに提供し、カレンダーで選択した日に基づいて、その下にあるいくつかのドロップダウン リストを非表示または表示したいと考えています。各ドロップダウン リストは次々に表示されますが、ユーザーが日付ピッカーで選択を行うまではすべて非表示になっています。各日ごとに 1 つのドロップダウン リストがあり、さまざまなオプションがあります。
日付ピッカーでのユーザーの選択に基づいて各ドロップダウンリストを表示/非表示にするフォームを取得できますが、問題はそれぞれの選択にあり、実際のドロップダウンリストがどこにあるかに基づいて、対応するドロップダウンボックスがページをシャッフルします。
どのドロップダウンリストが表示されていても、常に同じ行に表示されるようにするにはどうすればよいですか? それが理にかなっている場合は？
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
}
});
});