如何在带有复选框的多个选择框中添加垂直滚动条，因为我有很长的选项列表，而且没有滚动条，我尝试使用 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>
最佳答案
您需要在选项容器中添加一个max-height 并添加overflow:auto;
.multiselect-container{
max-height:200px;
overflow:auto;
}
查看代码片段:
$(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>关于javascript - 如何在带有复选框的多选框中添加垂直滚动条，大小属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44286596/