选择框中的滚动条没有出现答案

【问题标题】：Scollbar in select box not appearing选择框中的滚动条没有出现
【发布时间】：2017-02-07 15:49:55
【问题描述】：

我尝试让下拉菜单可滚动。但事情并没有成功。

所以这是模型：

<div class="form-group">

    <div id="fixedHeightDropDownContainer">
        <label class="control-label">@Resources.IntrusionGroup</label>
        <select name="intGroup1" id="intGroup1" class="form-control" tabindex="10" data-bind="options: $root.intGroups, optionsText: 'Name', optionsValue: 'Id',optionsCaption: '--Select--',value:$data.IntGroupName"></select>
    </div>
    <a href="#" class="ispicon ispicon_plus" data-toggle="modal" data-target="#addSchedule" data-bind="click:$parent.addGroup" title="Create New">Create New</a>

</div>

现在我尝试了 CSS：

div#fixedHeightDropDownContainer {
    height: 100px !important;
    width:auto !important;
    overflow-y:auto !important;
    background-color:red;
}

但它没有用。我将样式应用于 div，但保持下拉选项不变。

然后我尝试了：

#intrusionGroup1{
    height: 100px !important;
    width:auto !important;
    overflow-y:auto !important;
    background-color:red;
}

但也弄乱了用户界面。现在选择选项本身有高度，而不是选项菜单。

如何解决？

谢谢。

【问题讨论】：

不可能。您必须使用一些多选插件或为其编写 jquery 代码。
看看这个帖子stackoverflow.com/questions/24119643/…

标签： javascript html css knockout.js

【解决方案1】：

如果您正在寻找可滚动的下拉菜单和选择框，您可以使用引导程序：有一个名为“scrollable-menu”的类。使用它，您将获得下拉菜单的可滚动菜单以供参考： http://www.bootply.com/86116

【讨论】：

select-box和dropdown-menu有区别，请正确阅读问题
是的，但是如果您知道引导程序，引导程序的“可滚动菜单”适用于选择框和下拉框
你必须在你的回答中提供一个例子。

【解决方案2】：

为了设置选择框的滚动，您必须设置最大高度和溢出属性。请试试这个。

select#intGroup1 {
    max-height: 100px;
    overflow: scroll !important;
}

我认为这将解决您的问题。

【讨论】：

【解决方案3】：

您需要使用 size 属性扩展下拉列表

<select size="5">
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Mango</option>
    <option value="4">Grapes</option>
    <option value="5">Olives</option>
    <option value="6">Jalapeno</option>
    <option value="7">Potato</option>
    <option value="8">Tomato</option>
    <option value="9">Garlic</option>
  < /select >

还有here 工作示例

【讨论】：