0

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

1 回答 1

0

好吧..那个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.
  • 在条件之外声明optionArray变量if并且只做一次
  • 现在您有了日期和时间，它们以相同的方式填充，提取一个填充它们的方法（例如）function populateSelect(node, options) { ... }将 innerHTML 设置为空并创建选项。
于 2013-07-10T21:04:31.690 回答