javascript - 如何使选择框下拉菜单变短

标签 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

最佳答案

大小限制由浏览器控制,您无法更改。

如此处回答:

Height of an HTML select box (dropdown)

这里:

Limiting the displayed height of a select drop-down

关于javascript - 如何使选择框下拉菜单变短,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23921850/

相关文章:

html - 将按钮和文本居中放置在第二个按钮的右侧但不居中

html - 我无法在 IE8 和 9 中使用 CSS 为输入按钮设置渐变。对此有任何解决方案吗?

javascript - 使用循环将行添加到 sqlite 数据库 (Phonegap)

javascript - jquery按钮在onclick上显示不同的值

javascript - 获取 TypeError : Object(. ..) 不是在 React 中更改路由时的函数

jquery - 多个跨域 AJAX 调用。为什么 IE<9 会忘记 session ?

javascript - 如何在 HTML 中进行调试

javascript - 导航菜单错误 "Uncaught TypeError: Cannot read property ' 未定义的顶部”

javascript - 如何使用highchart动态将柱形图更改为镜像图

javascript - jQuery 多层 JSON