Javascript：动态下拉框更新

Question

我有一个动态的下拉框，当我选择一个酒店，它带出了相应的日期。现在我想在一个单独的下拉列表中添加时间。我尝试在函数中添加另一个参数，但没有成功。例如，如果我图片中情局，它会显示日期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>&nbsp;</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>&nbsp;</td> 
<td><span class="style4"><span class="style7">*</span>Which Date? </span></td> 
<td><select id="date" name="date"></select></td> 
</tr> 

<tr> 
<td>&nbsp;</td> 
<td><span class="style4"><span class="style7">*</span>Time? </span></td> 
<td><select id="time" name="time"></select></td> 
</tr> 

Answer 1

那么..那JavaScript代码写得不好。

但要回答你的问题，并绕过它。

onChange="propulate(this.id, 'date', 'time')" 

function populate(s1, s2, s3) { 
    ... 
    var s3 = document.getElementById(s3); 
    s3.innerHTML = ''; 
    ... 
    if (s1.value == ...) { 
    timeOptionArray = ["-1|Pick a time", "19:00|19:00", "18:00|18:00"]; 
    } 
    ... 
    for (var option in timeOptionArray) { ... } 

这将是你的代码的补充，而不是替代品。

一对夫妇建议：

• 提供一个更好的名字，以S1，S2，像transferSelectId和dateSelectId
• 不要声明具有相同的名称作为populate函数中的参数变量，所以他们的名字transferSelect和dateSelect。
• 声明if条件外optionArray变量，只有做一次
• 现在，你有日期和时间，这将会被填充以同样的方式，提取方法来填充他们（EG）function populateSelect(node, options) { ... }其设置innerHTML来清空并创建选项。