使用 jQuery 日期选择器动态填充下拉列表
Using jQuery date picker to dynamically populate dropdown list
我有一个用户填写的表格。首先，用户选择一家商店。然后用户使用 jQuery Datepicker 插件从日历中选择一个日期。基于用户选择的商店以及用户从日历中选择的星期几（星期一、星期二等）。那么这将决定哪些时间将出现在第三个下拉列表中。这是我的 html：
<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 fiddle 上查看完整内容：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;
})
})
谁能帮我解决这个问题？我还是很新，但我需要以某种方式让时间下拉列表根据用户选择的商店和日历中的星期几来填充时间，我不太明白其中的逻辑。非常感谢您的帮助，并提前致谢！
你可以看看我的JSfiddle: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);
});
})
})
这是一个工作片段，
我只在JS的末尾做了修改。
我删除了 "personal" 部分以使代码片段更短，
并在我的代码中添加了一些注释以使其更清晰！
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"> </div>
<div class="line lineRight"> </div>
<h1>Time & 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>
希望对您有所帮助。
我有一个用户填写的表格。首先，用户选择一家商店。然后用户使用 jQuery Datepicker 插件从日历中选择一个日期。基于用户选择的商店以及用户从日历中选择的星期几（星期一、星期二等）。那么这将决定哪些时间将出现在第三个下拉列表中。这是我的 html：
<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 fiddle 上查看完整内容：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;
})
})
谁能帮我解决这个问题？我还是很新，但我需要以某种方式让时间下拉列表根据用户选择的商店和日历中的星期几来填充时间，我不太明白其中的逻辑。非常感谢您的帮助，并提前致谢！
你可以看看我的JSfiddle: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);
});
})
})
这是一个工作片段，
我只在JS的末尾做了修改。
我删除了 "personal" 部分以使代码片段更短，
并在我的代码中添加了一些注释以使其更清晰！
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"> </div>
<div class="line lineRight"> </div>
<h1>Time & 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>
希望对您有所帮助。