jquery - HTML 选择多个而不滚动且不使用 Ctrl

Question

我有多项选择。这些选项通过 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>

Answer 1

您无法进一步滚动，因为您已将滚动设置为隐藏。

将 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;
});

看看下面的笔: https://codepen.io/fawmi/pen/RgVRJx