【发布时间】：2018-10-05 10:16:14
【问题描述】：
我正在处理一个表单，我需要根据用户之前的选择来填充下拉列表。例如，如果用户选择商店类型，则会提供日期选项，并且根据选择的商店类型和日期，下一个下拉菜单将显示时间选项。我已经完成了前两个步骤，但我不确定如何进行时间选项。
你可以在我的 JS fiddle 上看到我的代码：https://jsfiddle.net/katherinekonn/Lzuoy8r3/
<form action="/CustomerService-FFEventBookAppointment">
<fieldset>
<div class="form-row required">
<label for="fullname">
<span aria-required="true">Full Name</span>
<span class="required-indicator">*</span>
</label>
<input class="input-text email-input username required" id="fullname" type="text" name="fullname" value="" maxlength="500" autocomplete="off">
</div>
<div class="form-row">
<label for="store">Preferred Store *</label>
<div class="chzn-row valid">
<select id="store" name="store" onChange="changeDate(this.value);">
<option value=""></option>
<option value="MartinPlace">Martin Place</option>
<option value="ChatswoodChase">Chatswood Chase</option>
<option value="Emporium">Emporium</option>
<option value="Indooroopilly">Indooroopilly</option>
<option value="CollinsStreet">Collins Street</option>
</select>
</div>
</div>
<div class="form-row">
<label for="date">Date *</label>
<div class="chzn-row valid">
<select id="date" name="date" onChange="changeYimr(this.value);">
<option value="" disabled selected>Select</option>
</select>
</div>
</div>
<div class="form-row">
<label for="time">
Time *
</label>
<div class="chzn-row valid">
<select id="time" name="time">
<option value="" disabled selected>Select</option>
</select>
</div>
</div>
<div class="form-row">
<button id="submit" class="submit-btn" type="submit" value="Book" name="book">Book</button>
</div>
</fieldset>
</form>
var dateByStore = {
MartinPlace: ["Select", "Friday April 27", "Saturday April 28", "Sunday April 29", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13"],
ChatswoodChase: ["Select", "Friday April 27", "Saturday Aprul 28", "Sunday April 29", "Wednesday May 2", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Wednesday May 9", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13", "Wednesday May 16"],
Emporium: ["Select", "Friday April 27", "Saturday April 28", "Friday MAy 4", "Saturday May 5", "Friday May 11", "Saturday May 12"],
Indooroopilly: ["Select", "Friday April 27", "Saturday Aprul 28", "Sunday April 29", "Wednesday May 2", "Thursday May 3", "Friday May 4", "Saturday May 5", "Sunday May 6", "Wednesday May 9", "Thursday May 10", "Friday May 11", "Saturday May 12", "Sunday May 13", "Wednesday May 16"],
CollinsStreet: ["Select", "Friday April 27", "Saturday April 28", "Thursday May 3", "Friday May 4", "Saturday May 5", "Thursday May 10", "Friday May 11", "Saturday May 12"]
}
function changeDate(value) {
if (value.length == 0) document.getElementById("date").innerHTML = "<option></option>";
else {
var dateOptions = "";
for (dateId in dateByStore[value]) {
dateOptions += "<option>" + dateByStore[value][dateId] + "</option>";
}
document.getElementById("date").innerHTML = dateOptions;
}
}
我在想一些事情，如果用户选择了这家商店 && 这个日期，这里是下拉列表中动态填充的时间选项。我似乎无法弄清楚如何在我的代码中写出下一步。任何人都可以提供任何帮助吗？我是 JS 的初学者，非常感谢任何帮助。谢谢！
【问题讨论】：
-
时间选项应该是什么？表示 12:00 AM 到 12:00 PM ??还是别的什么？并且这个时间选项存储在数据库或数组中的任何位置，就像您对日期选项一样，或者您想使用日期函数参考日期选项生成动态？
-
时间选项将是例如上午 10 点至上午 11 点、下午 1 点至下午 2 点，但时间选项因商店类型和所选日期而异。时间选项将存储在数组中
-
你能展示一下这个数组吗？
-
这是我的问题，我不知道该怎么做。但例如：如果用户选择 Emporium && April 27: "10am-11am", "12pm-1pm", "2pm-3pm"
-
你有这个时间选项与我要问的另外两个 dropdowm 相关
标签： javascript jquery forms dom dynamic