Javascript:动态下拉框更新

Question

我有一个动态的下拉框，当我选择一个酒店时，它会显示出各自的日期。现在，我想在一个单独的下拉列表中添加时间。我尝试在函数中添加另一个参数，但没有成功。例如，如果我拍摄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>&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

• Dont使用与populate函数内部参数相同的名称声明变量，因此将它们命名为transferSelect，并在optionArray条件外将if变量命名为

• 。现在您有了日期和时间，以相同的方式填充它们，提取一个方法来填充它们(例如)D16，它将innerHTML设置为空并创建选项。