如何在datetimepicker更改时在下拉菜单中加载数据？

Question

我想在datetimepicker上每次更改的下拉菜单中加载一个列表，我正在使用tempus dominus。

HTML：

<div class="form-group">
                <div class="input-group date" id="pickdate" data-target-input="nearest">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                    </div>
                    <input type="text" class="form-control" name="scheduledate" data-target="#pickdate" data-toggle="datetimepicker" placeholder="Appointment Date">
                    <div class="input-group-append" data-target="#pickdate" data-toggle="datetimepicker">
                        <div class="input-group-text">...</div>
                    </div>
                </div>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-clock"></i></span>
                </div>
                <select class="form-control" id="scheduletime">
                    <div id="timeitems">

                    </div>
                </select>
            </div>

JS：

<script type="text/javascript">
    $(function() {
      $('#pickdate').datetimepicker({
        format: 'L',
        daysOfWeekDisabled: [0, 6],
        minDate: "now",
      });
    });
    $('body').on('change.datetimepicker',function(e){
        showtimesched(e.date);
    });

    function showtimesched(x){
        $.ajax({
            type: "POST",
            url: "timesched.php",
            data:{
                checkdate: x
            },
            success: function(data){
                //code for displaying the resultt. :(
               // display as the <option>.
            }
        });
    }

</script>

这是我的php for timesched.php：

<?php

if (isset($_POST['checkdate'])) {
    $checkdatesched = $_POST['checkdate'];
    echo "<option>" . $checkdatesched . "</option>";
}
?>

Answer 1

您可以使用更改功能

    $('#pickdate').datetimepicker({
        format: 'L',
        daysOfWeekDisabled: [0, 6],
        minDate: "now",
    }).on('dp.change', function (e) {
        var formatedValue = e.date.format(e.date._f);
        console.log(formatedValue);
    });

Answer 2

如果您想重新加载<select>选项，可以在success事件处理程序中执行此操作：

success: function(data){
    $('#scheduletime').empty(); //remove previous options
    $('#scheduletime').append(data); //Assuming your <option> already comes correctly formated
}

你的<div id="timeitems">不应该在<select>元素内