从下拉列表中选择后触发更改事件

Question

我有一个 JQuery 时间选择器定义为

<div class="form-group">  
    <label class="col-xs-4 col-md-3 control-label" align="right">
        <div class="pull-right">{{ jc_settings_form.meeting_time.label() }}</div>
    </label>
    <div class='col-xs-8 col-md-9 dateContainer' style="max-width:200px">
        <div class='input-group input-append date'>
            <input type="select" class="form-control timepicker" name="meeting_time" id="meeting_time"/>
        </div>
    </div>
</div>

这是表单中的一个选项，我想运行每当用户更改字段时自动验证表单，所以我有一些 javascript 比如

$('.manage_jc_settings_form')
    .formValidation({
        framework: 'bootstrap',
        excluded: ':disabled',
        ignore: [],
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            name: { 
                meeting_time: {
                    validators: {
                        notEmpty: {
                            message: 'Please provide a meeting time'
                        }
                    }
                },...

出于任何原因，如果我从时间选择器下拉列表中选择时间，它甚至不会触发更改，因此不会验证表单？如果我单击文本字段并手动更改时间，它甚至会触发更改吗？这是我的时间选择器初始化

(function($) {
    $(function () {
        $('#meeting_time').timepicker({
            defaultTime: '{{ jc_settings_form.meeting_time.default }}',
            dropdown: true,
            scrollbar: true,
            startTime: '9:00 am',
            timeFormat: 'h:mm a', // equivalent to 'h:mm a'
            interval: 5 //Number of minutes the up/down arrow's will move the minutes value in the time picker
        });
    });
})(jQuery);

知道如何强制它触发更改事件吗？我想也许我必须更改输入字段的 type="text" 属性？

Answer 1

从您的 post 中不能完全清楚您正在尝试做什么。如果您希望每次从下拉列表中选择不同的选项时都验证表单，您可能想尝试使用 onchange，如下所示：

<input type="select" class="form-control timepicker" name="meeting_time" id="meeting_time" onchange="yourValidationFunction()" />

我也会考虑尽可能远离 jQuery，因为您最终可能会发现它的语法糖导致的问题多于它解决的问题（更不用说它大大延长了页面加载时间）。

Answer 2

您可以运行 jQuery Timepicker 的更改事件函数，如下所示：

(function($) {
    $(function () {
        $('#meeting_time').timepicker({
            defaultTime: '{{ jc_settings_form.meeting_time.default }}',
            dropdown: true,
            scrollbar: true,
            startTime: '9:00 am',
            timeFormat: 'h:mm a', // equivalent to 'h:mm a'
            interval: 5,
            change: function(time) {
                alert('things changed');        
            }
        });
    });
})(jQuery);

It's listed on the docs here.

从下拉列表中选择后触发更改事件

trigger change event after picking from dropdown

javascript

jquery

timepicker