如何在带有复选框的多个选择框中添加垂直滚动条，大小属性不起作用答案

【问题标题】：How to add a vertical scroll bar in multiple select box with checkbox, size attribute not working如何在带有复选框的多个选择框中添加垂直滚动条，大小属性不起作用
【发布时间】：2017-05-31 22:05:58
【问题描述】：

如何在带有复选框的多个选择框中添加垂直滚动条，因为我有很长的选项列表，并且没有滚动条，我尝试使用 size 属性但它不起作用。下面是我的代码，请帮我添加滚动条-

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>check box</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('.ruleparameter').multiselect({
                includeSelectAllOption : true
            });
            $('#btnSelected').click(function() {
                var selected = $(".ruleparameter option:selected");
                var message = "";
                selected.each(function() {
                    message += $(this).text() + " " + $(this).val() + "\n";
                });
                alert(message);
            });
        });
    </script>
    </head>
    <body>
        <select class="ruleparameter" size="5" multiple name="HIGHEST_RCP_RP">
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
        </select>
    </body>
    </html>

【问题讨论】：

你到底想达到什么目的，我的意思是只要你设置的尺寸低于选项cnt，那么选择框就会有垂直滚动
我试图将显示的选项数量限制为 5 个，之后必须允许用户向下滚动才能找到其他选项。

标签： javascript jquery html css

【解决方案1】：

您需要将max-height 添加到选项容器并添加overflow:auto;

.multiselect-container{

  max-height:200px;
  overflow:auto;
}

见代码sn-p：

$(function() {
  $('.ruleparameter').multiselect({
    includeSelectAllOption: true
  });
  $('#btnSelected').click(function() {
    var selected = $(".ruleparameter option:selected");
    var message = "";
    selected.each(function() {
      message += $(this).text() + " " + $(this).val() + "\n";
    });
    alert(message);
  });
});

.multiselect-container{

  max-height:200px;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

<select class="ruleparameter" size="5" multiple name="HIGHEST_RCP_RP">
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
</select>

【讨论】：

【解决方案2】：

Frank 是正确的，应该有一个垂直滚动...实际上默认情况下，如果 div 的大小有太多内容。 Mac OSX Lion 是一个例外。我知道默认情况下溢出是隐藏的。

无论如何，您也可以通过在您的 CSS 文件中放置以下代码来确保有滚动条：

section.ruleparameter {
    overflow-y: scroll;
}

如果您的内容确实在底部剪裁，那么这应该可以解决问题。如果不是，那么问题肯定出在其他地方。

希望对您有所帮助并发布您的结果！

【讨论】：