Question

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

我希望当我点击日期下拉菜单触发的时间，并且在完成日期选择时，打开下拉时间。这是我的部分代码

$('#time').on('focus',function(event){
    openDropDown($('#date'));
});

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

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

DEMO http://jsfiddle.net/vuz8bpvv/

Answer 1

$(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>

更改jquery需要点击两次？

1 个答案: