Question

我所做的是使用javascript将选择框的下拉列表的大小限制为8，以便缩短下拉列表。

我的问题是，当我点击选择框时，生日也会展开。当我从选择框中选择时，如何防止插件加入生日？

当我在我的选择框中放入一个javascript以使下拉框缩短时，问题就出现了：

这是我放入选择框的脚本：

 onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;"

当前输出：http://jsfiddle.net/3Xahs/1/

enter image description here

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" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bmonth" data-container="body" data-placement="left" data-toggle="popover" data-content="Select your Birthday!" >
                        <option value="">Month</option>

                        </select>
                        <select name="day" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bday" data-container="body" data-placement="top" data-toggle="popover" data-content="Select your Birthday!" >
                        <option value="">Day</option>

                        </select>
                        <select name="year" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="byear" data-container="body" data-placement="right" data-toggle="popover" data-content="Select your Birthday!" >
                        <option value="">Year</option>

                        </select>
                </div>
                </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>");
            });
});

Answer 1

带文字span的{{1}}是一个内嵌元素，默认忽略高度和宽度并填充可用空间。

在不改变实际DOM结构的情况下解决它的一种方法是应用Birthday例如并给它一个display: block，height，在你的情况下为{{1}同样，与此类似：

width

将类分配给范围，如下所示：

float: left

DEMO - 将高度和宽度应用于span元素

这只是一种方式，但你也可以在它周围换一个div，但是你需要应用类似于上面的CSS。

Answer 2

我不完全确定HTML的来源（或者更准确地说，你可以修改多少）但是如果你将 SPAN 元素移出主容器并显示它'内联'它能够在没有扩展的情况下工作：

<div class="col-sm-offset-1 col-sm-12">
    <!-- NOTE: This is where the 'Birthday' element was moved up to -->
    <span class="input-group-addon">Birthday</span>
    <div class="form-group input-group">
        <div class="btn-group input-group">
            <select name="month" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bmonth" data-container="body" data-placement="left" data-toggle="popover" data-content="Select your Birthday!">
                <option value="">Month</option>
            </select>
            <select name="day" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="bday" data-container="body" data-placement="top" data-toggle="popover" data-content="Select your Birthday!">
                <option value="">Day</option>
            </select>
            <select name="year" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;" class="btn btn-default" id="byear" data-container="body" data-placement="right" data-toggle="popover" data-content="Select your Birthday!">
                <option value="">Year</option>
            </select>
        </div>
    </div>
</div>

和相应的CSS：

span.input-group-addon {
    display:inline;
    float:left;
    width: 30%;
}

JSFiddle示例：http://jsfiddle.net/MasterXen/v79KW/1/

如何在父进程扩展时使插件停留在引导程序中

2 个答案: