javascript - 根据php中的特定日期显示单选按钮

Question

我正在尝试根据在文本框中选择的特定日期名称显示单选按钮。我创建了一个存储日期名称和描述的天表。当您从日期选择器中选择日期时，它会提取一个日期名称，并根据我要获取的日期名称来获取值，即选择日期名称的值。例如，如果选择的日期是 2018 年 5 月 13 日，它将显示天为太阳，太阳上的事件将动态显示在单选按钮或选择选项中。这是代码。

  $(function() {
  var date = new Date();
  var dayNo = date.getDay();
  var mindate = (7 - dayNo);
  var d = ['sun', 'mon', 'tue', 'wed', 'th', 'fr', 'sat'];
  var event = ['test1', 'Test2']
var event1 = ['test2', 'Test2']
  //Lest assume this is  event from database
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    minDate: mindate,
    onSelect: function(dateText, inst) {
      var today = new Date(dateText);
      var a = (d[today.getDay()]);
      $('#slDay').val(d[today.getDay()])
      var html = '';
      $('#slDay').html('');
     if ((d[today.getDay()] =='sun'){
      $.each(event, function(index, value) {

        html += '<option value="' + value + '">' + value + '</option>'
      });

}); $('#slDay').append(html);

    });
  });
});
</script>

<input type="text" id="datepicker">
<input type="text" id="datepicker1" name="datepicker1">

标签： javascriptphpjquerymysql

Answer 1

使用dropdownid 和 append。我为选项创建片段

$(function() {
  var date = new Date();
  var dayNo = date.getDay();
  var mindate = (7 - dayNo);
  var d = ['sun', 'mon', 'tue', 'wed', 'th', 'fr', 'sat'];
  var event = ['test1', 'Test2'] //Lest assume this is  event from database
  $("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    firstDay: 1,
    minDate: mindate,
    onSelect: function(dateText, inst) {
      var today = new Date(dateText);
      var a = (d[today.getDay()]);
      $('#slDay').val(d[today.getDay()])
      var html = '';
      $('#slDay').html('');
      if (d[today.getDay()] == 'sun')
        $.each(event, function(index, value) {
          html += '<option value="' + value + '">' + value + '</option>'
        });
      $('#slDay').append(html);
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="datepicker">

<select id='slDay'>

</select>