小贝子编程

使用 jQuery 日期选取器动态填充下拉列表



我有一个用户填写的表单。首先，用户选择一个商店。然后用户使用jQuery Datepicker插件从日历中选择一个日期。基于用户选择的商店以及用户从日历中选择的星期几(星期一、星期二等(。然后，这将确定哪些时间将显示在第三个下拉列表中。这是我的网页：

<form action="/CustomerService-FFEventBookAppointment">
<fieldset>
<div class="form-row"><label for="store">Preferred Store *</label>
<div class="chzn-row valid">
<select class="chzn-global-select input-select optional required" id="store" name="store">
<option value=""></option>
<option value="Martin Place">Martin Place</option>
<option value="Chatswood Chase">Chatswood Chase</option>
<option value="Emporium">Emporium</option>
<option value="Indooroopilly">Indooroopilly</option>
<option value="Collins Street">Collins Street</option>
<option value="DJ Market Street">DJ Market Street</option>
<option value="DJ Bourke Street Mens">DJ Bourke Street Mens</option>
<option value="DJ Bourke Street Womens">DJ Bourke Street Womens</option>
<option value="DJ Queen Street">DJ Queen Street</option>
<option value="DJ Rundle Mall">DJ Rundle Mall</option> 
</select>
</div>
</div>
<div class="form-row"><label for="date">Date *</label>

下面是我的JavaScript。您可以在我的JS小提琴上查看完整的内容：https://jsfiddle.net/katherinekonn/qquprwhg/

<div class="chzn-row valid">
<input type="text" lass="chzn-global-select input-select optional required" id="datepicker" name="date">
</div>
</div>
<div class="form-row"><label for="time">Time * </label>
<div class="chzn-row valid">
<select class="chzn-global-select input-select optional required" id="time" name="time">
<option value=""></option> 
</select>
</div>
</div>
var dayByStore = {
"Martin Place": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"Chatswood Chase": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
};
var timeByDayByStore = {
"Martin Place":{
"Friday":[
"9:00 AM - 10:00 AM",
"6:00 PM - 7:00 PM"
],
"Saturday":[
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"4:00 PM - 5:00 PM"
],
"Sunday":[
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Monday":[
"9:00 AM - 10:00 AM",
"6:00 PM - 7:00 PM"
],
"Tuesday":[
"9:00 AM - 10:00 AM"
],
"Wednesday":[
"9:00 AM - 10:00 AM",
"6:00 PM - 7:00 PM"
],
"Thursday":[
"9:00 AM - 10:00 AM",
"7:00 PM - 8:00 PM"
],
},
"Chatswood Chase":{
"Friday":[
"10:00 AM - 11:00 AM",
"4:00 PM - 5:00 PM"
],
"Saturday":[
"9:00 AM - 10:00 AM",
"4:00 PM - 5:00 PM"
],
"Sunday":[
"10:00 AM - 11:00 AM",
"4:00 PM - 5:00 PM"
],
"Monday":[
"10:00 AM - 11:00 AM",
"4:00 PM - 5:00 PM"
],
"Tuesday":[
"10:00 AM - 11:00 AM",
"4:00 PM - 5:00 PM"
],
"Wednesday":[
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"4:00 PM - 5:00 PM"
],
"Thursday":[
"8:00 PM - 9:00 PM"
],
},
};

$( function() {
$('#datepicker').datepicker({ dateFormat: 'DD, MM, d, yy' });
} );
$(document).ready(function(){
$(document).on('change', '#datepicker', function(){
var store = $('#store option:selected').val();
var timeOptions = "";
for (timeId in timeByDayByStore[store][date]) {
timeOptions += "<option value='" + timeByDayByStore[store][date][timeId]  + "'>" + timeByDayByStore[store][date][timeId] + "</option>";
}
document.getElementById("time").innerHTML = timeOptions;
})
})

谁能帮我做这个功能？我仍然很新，但我需要以某种方式根据用户从日历中选择的商店和星期几来填充时间下拉列表，但我无法完全弄清楚逻辑。非常感谢帮助，提前感谢您！

这是一个工作片段，
我只在 JS 的末尾进行了修改。
我删除了"个人"部分以使片段更短， 并在我的代码中添加了一些注释以使其更清晰！

var dayByStore = {
"Martin Place": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"Chatswood Chase": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"Emporium": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"Indooroopilly": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"Collins Street": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"DJ Market Street": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"DJ Bourke Street Mens": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"DJ Bourke Street Womens": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"DJ Queen Street": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
"DJ Rundle Mall": ["Friday", "Saturday", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday"],
};
var timeByDayByStore = {
"Martin Place": {
"Friday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Saturday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Sunday": [
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Monday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wednesday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM"
],
},
"Chatswood Chase": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Saturday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Wednesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"Emporium": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
"Saturday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wesnesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"Indooroopilly": {
"Friday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Saturday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM"
],
"Monday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Tuesday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Wednesday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Thursday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"Collins Street": {
"Friday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Saturday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Monday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM"
],
"Tuesday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM"
],
"Wednesday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM"
],
"Thursday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM"
],
},
"DJ Market Street": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
"Saturday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wednesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"DJ Bourke Street Mens": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
"Saturday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wednesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"DJ Bourke Street Womens": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
"Saturday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wednesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"DJ Queen Street": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
"Saturday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Sunday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wednesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
"DJ Rundle Mall": {
"Friday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
"Saturday": [
"9:00 AM - 10:00 AM",
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Sunday": [
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM"
],
"Monday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Tuesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Wednesday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM"
],
"Thursday": [
"10:00 AM - 11:00 AM",
"11:00 AM - 12:00 PM",
"12:00 PM - 1:00 PM",
"1:00 PM - 2:00 PM",
"2:00 PM - 3:00 PM",
"3:00 PM - 4:00 PM",
"4:00 PM - 5:00 PM",
"5:00 PM - 6:00 PM",
"6:00 PM - 7:00 PM",
"7:00 PM - 8:00 PM",
"8:00 PM - 9:00 PM"
],
},
};
var user_store = '';
var user_day = '';
// Function where the options are updated
function update_time() {

// Empty the options list
$('#time').empty();
// Exits function if there's no store, or no day.
if (!user_store || !user_day) return;

// Gets the open hours of the user selected store and day
var open_hours = timeByDayByStore[user_store][user_day];
// Fills the options list
$.each(open_hours, function(key, value) {
$('#time')
.append($("<option></option>")
.attr("value", key)
.text(value));
});
}
$(function() {
$('#datepicker').datepicker({
dateFormat: 'DD, MM, d, yy',
// Added action on selection of a date
onSelect: function(dateText, inst) {
// Here, we split the value of the datepicker to get the day, like "Monday"
user_day = dateText.split(',')[0];
// Then, we call the update function!
update_time();
}
});
});
// Call the function when changing the store, too!
$('#store').on('change', function(){
user_store = $('#store').val();
update_time();
});
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ffEventContainer">
<div id="ffEvent">
<div id="ffHeader">
<div class="line">&nbsp;</div>
<div class="line lineRight">&nbsp;</div>
<h1>Time &amp; Venue</h1>
</div>
<div id="ffLanding">
<form action="/CustomerService-FFEventBookAppointment">
<fieldset>
<div class="form-row"><label for="store">Preferred Store *</label>
<div class="chzn-row valid">
<select class="chzn-global-select input-select optional required" id="store" name="store">
<option value=""></option>
<option value="Martin Place">Martin Place</option>
<option value="Chatswood Chase">Chatswood Chase</option>
<option value="Emporium">Emporium</option>
<option value="Indooroopilly">Indooroopilly</option>
<option value="Collins Street">Collins Street</option>
<option value="DJ Market Street">DJ Market Street</option>
<option value="DJ Bourke Street Mens">DJ Bourke Street Mens</option>
<option value="DJ Bourke Street Womens">DJ Bourke Street Womens</option>
<option value="DJ Queen Street">DJ Queen Street</option>
<option value="DJ Rundle Mall">DJ Rundle Mall</option>
</select>
</div>
</div>
<div class="form-row"><label for="date">Date *</label>
<div class="chzn-row valid">
<input type="text" lass="chzn-global-select input-select optional required" id="datepicker" name="date">
</div>
</div>
<div class="form-row"><label for="time">Time * </label>
<div class="chzn-row valid">
<select class="chzn-global-select input-select optional required" id="time" name="time">
<option value=""></option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>

我希望它有所帮助。

你可以看看我的JS小提琴：https://jsfiddle.net/1bx2ccb0/1/

const time = document.getElementById("time");
$(document).ready(function() {
$(document).on('change', '#datepicker', function() {
var store = $('#store option:selected').val();
const date = document.getElementById("datepicker").value.split(',')[0];
time.innerHTML = "";
timeByDayByStore[store][date].forEach(timeByDay => {
const option = new Option(timeByDay, timeByDay)
time.add(option);
});
})
})

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium