ホテルを選択すると、それぞれの日付が表示される動的なドロップダウン ボックスがあります。別のドロップダウンに時間を追加したいのですが、関数に別のパラメーターを追加しようとしましたが、成功しませんでした。たとえば、CIA を選択すると、ドロップダウン日付に 10/09/13 と 11/09/13 の日付が表示されます。ここで、19:00 と 18:00 の時間選択を独自のドロップダウンに追加したいと思います。
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "CIA to Table Bay Hotel" || s1.value == "CIA to The Portswood Hotel" || s1.value == "CIA to The Commodore Hotel" || s1.value == "CIA to Victoria and Alfred Hotel" ){
var optionArray = ["-1|Pick a date","10/09/13|10/09/13","11/09/13|11/09/13"];
} else if(s1.value == "Table Bay Hotel to CIA" || s1.value == "The Portswood Hotel to CIA" || s1.value == "The Commodore Hotel to CIA" || s1.value == "Victoria and Alfred Hotel to CIA" ){
var optionArray = ["-1|Pick a date","14/09/13|14/09/13","15/09/13|15/09/13"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
<tr>
<td> </td>
<td><span class="style1"><span class="style7">*</span>Transfer?</span></td>
<td><select id="where" name="where" onChange="populate(this.id,'date')">
<option value="Pick up point">Pick up point</option>
<option value="CIA to Table">CIA to Table Bay Hotel</option>
<option value="CIA to Portswood ">CIA to The Portswood Hotel</option>
<option value="CIA to Commodore">CIA to The Commodore Hotel</option>
<option value="CIA to Victoria and Alfred Hotel">CIA to Victoria and Alfred Hotel</option>
<option value="Table to CIA">Table Bay Hotel to CIA</option>
<option value="Portswood to CIA">The Portswood Hotel to CIA</option>
<option value="Commodore to CIA">The Commodore Hotel to CIA</option>
<option value="Victoria and Alfred Hotel to CIA">Victoria and Alfred Hotel to CIA</option>
</select></td>
</tr>
<tr>
<td> </td>
<td><span class="style4"><span class="style7">*</span>Which Date? </span></td>
<td><select id="date" name="date"></select></td>
</tr>
<tr>
<td> </td>
<td><span class="style4"><span class="style7">*</span>Time? </span></td>
<td><select id="time" name="time"></select></td>
</tr>