Javascript 如何调整选择器下拉菜单的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39630141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to adjust height of the selectpicker dropdown
提问by S M
I have a selectpicker (bootstrap) in my page which options are loading dyanmically. It has a large number of list but not good to see. I want to reduce the height of the selectpicker. I have give inline style and all but it is not reflecting.
我的页面中有一个选择器（引导程序），其中的选项正在动态加载。它有大量列表，但不好看。我想降低选择器的高度。我已经给出了内联样式，但它并没有反映出来。
this is my code
这是我的代码
<select class="selectpicker" data-dropup-auto="false" id="estType" name="estType">
<option selected disabled value="0">Select</option>'
</select>
My js code
我的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);
}
});
});
回答by S M
I corrected it by myself...
我自己纠正了...
Just add data-sizein the html
只需data-size在html中添加
<select class="selectpicker" data-dropup-auto="false" data-size="5" id="estType" name="estType">
<option selected disabled value="0">Select</option>'
</select>
回答by Fred K
Using Bootstrap Select, data-sizedoesn't work for me. I need to override CSS with this:
使用引导选择，data-size不适合我的工作。我需要用这个覆盖 CSS：
div.dropdown-menu.open{
max-height: 314px !important;
overflow: hidden;
}
ul.dropdown-menu.inner{
max-height: 260px !important;
overflow-y: auto;
}
Change the size as you like.
根据需要更改大小。
回答by harryparkdotio
While maybe not what you're looking for, it is a great alternative.
虽然可能不是您想要的，但它是一个很好的选择。
https://silviomoreto.github.io/bootstrap-select/examples/#live-search
https://silviomoreto.github.io/bootstrap-select/examples/#live-search
It allows for searching within the dropdown, therefore removing the need to adjust the height of the dropdown, plus it works with bootstrap.
它允许在下拉列表中进行搜索，因此无需调整下拉列表的高度，而且它可以与引导程序一起使用。
回答by AM - EVS
I recently spent an hour trying to find how to restrict the height of a dropdown. Turns out the size attribute for select tags is set to 'auto' in the javascript file. For me, it was around line 369.
我最近花了一个小时试图找到如何限制下拉菜单的高度。结果是，在 javascript 文件中，选择标签的大小属性设置为“自动”。对我来说，它大约在第 369 行。
The solution is simple:
解决方法很简单：
Set size: '10'//or however many options you want to be listed
设置size: '10'// 或您想要列出的多个选项
$('.selectpicker').selectpicker({
size: '10'
});
