Question

如何在带有复选框的多个选择框中添加垂直滚动条，因为我有一长串选项，并且没有滚动条，我尝试使用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>

Answer 1

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

.multiselect-container{

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

请参阅代码段：

＆＃13;

$(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);
  });
});

＆＃13;

.multiselect-container{

  max-height:200px;
  overflow:auto;
}

＆＃13;

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

＆＃13;

Answer 2

弗兰克是正确的，垂直滚动应该在那里......实际上默认情况下，如果div的内容太多了。 Mac OSX Lion是个例外。我知道默认情况下会隐藏溢出。

无论如何，您还可以通过将以下代码放入CSS文件来确保有滚动条：

section.ruleparameter {
    overflow-y: scroll;
}

如果您的内容确实在底部剪裁，那么应该解决问题。如果没有，那么问题肯定在其他地方。

我希望能帮助您发布结果！

如何使用复选框在多个选择框中添加垂直滚动条，尺寸属性不起作用

2 个答案: