Question

我的页面中有一个selectpicker（bootstrap），其中的选项是dyanmically加载。它有大量的列表但不好看。我想减少selectpicker的高度。我给出了内联样式，但它没有反映出来。

这是我的代码

<select class="selectpicker" data-dropup-auto="false" id="estType" name="estType">
   <option selected disabled value="0">Select</option>'
</select>

我的js代码

$function ({
    $.ajax({
        datatype: "json",
        type: "GET",
        async: false,
        url: "Establishment/GetPrePopulationDetails",
        success: function (result, success) {
            var esttypes = $.map(result['EstablishmentTypes'],
                function (key, value) {
                    return $('<option>', { value: value, text: key });
                });
            $('#estType').append(esttypes);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error(xhr.status);
            console.error(thrownError);
        }
    });
});

Answer 1

我自己纠正了......

只需在html

中添加data-size即可

<select class="selectpicker" data-dropup-auto="false" data-size="5" id="estType" name="estType">
   <option selected disabled value="0">Select</option>'
</select>

Answer 2

虽然可能不是您正在寻找的东西，但它是一个很好的选择。

https://silviomoreto.github.io/bootstrap-select/examples/#live-search

它允许在下拉列表中进行搜索，因此无需调整下拉列表的高度，另外还可以使用bootstrap。

Answer 3

我最近花了一个小时试图找到如何限制下拉菜单的高度。事实证明，在javascript文件中，选择标签的size属性设置为“ auto”。对我来说，大约在第369行。

解决方案很简单：

设置size: '10' //或要列出的许多选项

$('.selectpicker').selectpicker({
   size: '10'
});

Answer 4

您可以在选择标签上使用form-control-sm

     <select class="form-control form-control-sm" id="processdef">
            <option>Process Def1</option>
            <option>Process Def2</option>
            <option>Process Def3</option>
            <option>Process Def4</option>
            <option>Process Def5</option>
      </select>

如何调整selectpicker下拉列表的高度

4 个答案: