更改jquery需要点击两次

change jquery need to be tap twice?

本文关键字：两次 jquery 更改      更新时间：2023-09-26

我试图将两个下拉菜单（日期和时间）的体验结合起来，以产生更好的用户体验。不要问我为什么不使用html5日期时间，因为我在这里为旧手机做后备。

我想当我点击日期下拉列表触发的时间，当日期选择完成时，打开时间下拉列表。这是我的部分代码

$('#time').on('focus',function(event){
    openDropDown($('#date'));
});
$("#date").change(function () {
    if(this.value != 0){
        openDropDown($('#time'));
        $('#time').off('focus');
    }
});

但为什么它不能正常工作？我需要点击两次才能使日期下拉列表正常工作？

演示http://jsfiddle.net/vuz8bpvv/

$(document).ready(function() {
        $('#time').on('focus',function(event){
            openDropDown($('#date'));
        });
        $("#date").change(function () {
            if(this.value != 0){
                $('#time').off('focus'); // first, focus the time drop down
                openDropDown($('#time'));
            }
        });
        function openDropDown(elem) {
        if (document.createEvent) {
            var e = document.createEvent("MouseEvents");
            e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            elem[0].dispatchEvent(e);
        } else if (element.fireEvent) {
            elem[0].fireEvent("onmousedown");
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="date">
    <option value="0">Date</option>
    <option>3/4/2015</option>
    <option>4/4/2015</option>
    <option>5/4/2015</option>
</select>
<select id="time">
    <option>Time</option>
    <option>1:00 AM</option>
    <option>2:00 AM</option>
</select>

相关文章：