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

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

将overflow-y的{{1}}属性设置为commits2

auto

确定列表项的长度添加将其添加为选择项的大小属性。例如，如果您的ajax调用返回9项，则将.commits2{ overflow-y: auto; }的{{1}}属性设置为size

select

这使得select显示一切。

多重选择应该正常工作。

看看以下笔： https://codepen.io/fawmi/pen/RgVRJx

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

1 个答案: