我有多项选择。这些选项通过 AJAX 调用填充。选项的数量可能会有很大差异。
<div class="col-md-9">
<div class="form-group">
<select multiple class="commits2 form-control">
<option>Please select a branch and a tag!</option>
</select>
</div>
</div>
我希望选择没有垂直滚动条,并在页面上同时显示所有选项。所以我正在使用这个 css:
.commits2{
overflow-y: hidden;
}
如您所见,我正在使用 Bootstrap 。我的代码只在一个小容器中呈现前 4 个选项,我什至无法进一步滚动。我怎样才能达到我的需要?
我也试过:
.commits2{
overflow-y: auto;
}
这不起作用,因为它将滚动条留在右侧。
我还希望能够在不按住 ctrl 的情况下选择多个选项。这是应该启用该功能的一些 jQuery 代码。
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true);
return false;
});
由于某些未知原因,如果我使用此代码,我只能单击 2 个选项,而不能单击更多,如果我向下滚动列表并按下它,则会将我带到开头,并且不会选择该选项。
这是我正在使用的 Bootstrap :
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<script src = "js/bootstrap.min.js"></script>
最佳答案
您无法进一步滚动,因为您已将滚动设置为隐藏。
将 commits2
的 overflow-y
属性设置为 auto
.commits2{
overflow-y: auto;
}
确定列表项的长度,将其添加为所选元素的大小属性。因此,例如,如果您的 ajax 调用返回 9 个元素,请将 select
的 size
属性设置为 9
<select multiple class="commits2 form-control" size="9">
这使得选择显示所有内容。
您的多选应该可以正常工作。
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true);
return false;
});
关于jquery - HTML 选择多个而不滚动且不使用 Ctrl,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44657552/