堆栈内存溢出
  简体   繁体   English

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

[英]Using jQuery date picker to dynamically populate dropdown list

 原文  2018-05-09 08:37:39  6   2    javascript/ jquery/ forms/ multidimensional-array/ jquery-ui-datepicker

问题描述

I have a form that a user fills out. 我有一个用户填写的表格。 First the user selects a store. 首先，用户选择商店。 Then the user selects a date from a calendar, using the jQuery Datepicker plugin. 然后，用户使用jQuery Datepicker插件从日历中选择一个日期。 Based on which store the user selects and which DAY of the week the user selects from the calendar (Monday, Tuesday, etc). 根据用户选择的商店以及用户从日历中选择星期几（星期一，星期二等）。 then that will determine which times will appear in the third dropdown. 然后确定哪些时间将出现在第三个下拉菜单中。 Here is my html: 这是我的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>

And below is my JavaScript. 下面是我的JavaScript。 You can view the full thing on my JS fiddle: https://jsfiddle.net/katherinekonn/qquprwhg/ 您可以在我的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;
    })
  })

Can anyone help me with the function? 谁能帮我使用该功能？ I'm still very new, but I need to somehow have the time dropdown become populated by times based on what store and what day of the week from the calendar the user selects, and I can't quite figure out the logic. 我仍然很新，但是我需要以某种方式根据用户选择的日历中哪个商店和一周中的星期几来按时间填充下拉列表，而我还不太清楚逻辑。 Help is greatly appreciated and thank you in advance! 非常感谢您的帮助，并在此先感谢您！

2 个解决方案

解决方案1
 1  2018-05-09 09:04:41

You may take a look on my JS fiddle: https://jsfiddle.net/1bx2ccb0/1/ 您可以看一下我的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);
    });
  })
})

解决方案2
 1 已采纳  2018-05-09 09:08:07

Here is a working snippet, 这是一个工作片段，
where I only made modifications at the end of the JS. 我只在JS末尾进行了修改。
I removed the "personal" parts to make the snippet shorter, and added some comments in my code to make it clearer! 我删除了“个人”部分以使代码段更短，并在代码中添加了一些注释以使其更加清晰！ 

 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>

I hope it helps. 希望对您有所帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用jQuery动态填充下拉列表 - Populate dropdown list dynamically using jquery 使用jquery load事件填充下拉列表 - populate dropdown list using jquery load event 使用 jQuery 从数据库填充下拉列表 - Populate dropdown list from database using jQuery 无法使用jQuery填充选择下拉列表 - unable to populate a select dropdown list using jquery 如何使用数组和Jquery填充下拉列表 - How to populate a dropdown list using an array and Jquery 在 AngularJS 中动态填充下拉列表 - Populate dropdown list dynamically in AngularJS jQuery日期选择器，自定义填充所选日期 - jQuery date picker, custom populate selected date 使用 jQuery 填充下拉列表 - Populate a dropdown using jQuery 如何使用 JQuery 动态更新下拉列表？ - How to update a dropdown list dynamically using JQuery? jquery - 如何动态填充下拉列表/选择/组合框？ - jquery - How to populate dropdown/select/combobox dynamically?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM