select2下拉菜单转到Enter Key按下的下一个下拉菜单

时间:2017-07-06 07:15:58

标签: javascript date jquery-select2 date-format

我使用select2在下拉列表中启用搜索字段。但是我想在输入密钥后移动到下一个下拉字段。



$(document).ready(function() {
        $(".js-example-basic-single").select2();
    });
    
    $(document).on("click", ".select2-container", function ()
{
    setTimeout("dropscroll()", 1)
}),
    $("#dob_day").select2().on("select2:close", function (e)
        {
            $("#dob_month").focus()
        }
    ),

    $("body").on("#container", ".select2", function ()
    {
        $("#dob_day").select2("open")
    });

.dob_m{
    height: 34px;!important;
    width: 110px;!important;
}
.dob_d{
    height:34px;!important;
    width: 65px;!important;

}
.dob_y{
    height:34px;!important;
    width: 85px;!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<form class="well form-horizontal" action=" " method="post" 
    id="user_edit">
   
   <div class="form-group">
            <div class="col-md-8 inputGroupContainer">
                <div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>

                    <select name="dob_day" id ="dob_day" class="dob_d js-example-basic-single ">
                    
                    </select>
                    <select name="dob_month" id ="dob_month" class="dob_m js-example-basic-single ">
                        
                    </select>
                    <select name="dob_year" id ="dob_year"  class=" js-example-basic-single dob_y">
                       
                    </select> <input type="hidden" name="dob" value="1"  />
                </div>
            </div>
        </div>
 </form>
     <script>
        $(document).ready(function () {
            var month = [], day = [], year = [];

            for (var i = 1; i <= 12; i++) {
                month.push(i);
            }
            for (var i = 1; i <= 31; i++) {
                day.push(i);
            }
            for (var i = 1900; i <= (new Date().getFullYear()); i++) {
                year.push(i);
            }
            $.each(day, function (index, d) {
                $("#dob_day").append("<option>" + d + "</option>");
            });
            $.each(month, function (index, m) {
                $("#dob_month").append("<option>" + m + "</option>");
            });
            $.each(year, function (index, y) {
                $("#dob_year").append("<option>" + y + "</option>");
            });
        });
    </script>
&#13;
&#13;
&#13;

我想在使用enter和tab键选择每个下拉列表后转到下一个。我只能每天搬家。但是如何每月添加。

0 个答案:

没有答案
相关问题