javascript - jQuery 选择模式

Question

我有一个在 Laravel 中完成的日程安排应用程序，它应该使您能够选择要预订项目的时间段。如果单击 9:00，您将获得 9:30 以后的下拉列表，增量为 30 分钟。我正在使用 Bootstraps 下拉菜单。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Reserve
        until
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
    </ul>
</div>

下拉菜单工作正常，但我想以某种方式获取所选值

<script>
    $('#confirm-reservation').on('show.bs.modal', function (e) {
        $(this).find('.dropdown-menu li').remove();
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

        var startTime = moment($(e.relatedTarget).data('start-time')).utc();
        var endTime = moment($(e.relatedTarget).data('end-time')).utc();

        while (startTime < endTime) {
            $(this).find('.dropdown-menu').append('<li><a href="#">' + startTime.format("HH:mm") + '</a></li>');
            startTime.add(30, 'minutes');
        }
    });
</script>

Answer 1

在下拉列表中添加事件处理程序，如下所示，

$(document).on('click','#confirm-reservation .dropdown-menu a', function(){
    console.log("Selected "+ $(this).text());
});

我已将事件委托(delegate)给 document，因为初始化事件处理程序时列表项不会出现。

希望这有帮助。