如何使选择框下拉列表缩短

时间:2014-05-28 21:04:44

标签: javascript jquery html css twitter-bootstrap-3

我的问题是,当我在选择框生日表格中选择年份和日期时,下拉列表会很长。我希望下拉列表很短,但上面有一个滚动条。

HTML:

<div class="col-sm-offset-1 col-sm-12">
    <div class="form-group input-group">
        <div class="btn-group input-group">
            <span class="input-group-addon">Birthday</span>
                <select name="month" class="btn btn-default" id="bmonth" data-container="body" data-placement="left" data-toggle="popover" data-content="Select your Birthday!" >                                      
                    <option>Month</option>                   
                </select>
                <select name="day" class="btn btn-default" id="bday" data-container="body" data-placement="top" data-toggle="popover" data-content="Select your Birthday!" >
                    <option>Day</option>                                
               </select>
              <select name="year" class="btn btn-default" id="byear" data-container="body" data-placement="right" data-toggle="popover" data-content="Select your Birthday!" >
                <option>Year</option>
              </select>
        </div>
        <br />
    </div>
</div>

脚本:

$(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) {
                $("#bday").append("<option value = '"+d+"'>"+d+"</option>");
            });
            $.each(month, function (index, m) {
                $("#bmonth").append("<option value = '"+m+"'>"+m+"</option>");
            });
            $.each(year, function (index, y) {
                $("#byear").append("<option value = '"+y+"'>"+y+"</option>");
            });
});

当前输出:

enter image description here

1 个答案:

答案 0 :(得分:2)

大小限制由浏览器控制,而不是您可以更改的内容。

在这里回答:

Height of an HTML select box (dropdown)

在这里:

Limiting the displayed height of a select drop-down