JQuery dropdown height

Question

I want to limit the number of items in the drop-down list to, say, 6. After a pretty search I can find nothing but a hint, there is a maxHeight option, but this does not seem to have an effect.

HTML:

<label for="files">Select a file:</label> <select name="files" id="files"> </select> 

JavaScript:

 // configure $( "#files" ).selectmenu({ icons: { button: "ui-icon-search" } , style: 'dropdown', maxHeight: 60 }); // Test data for( i = 0; i < 100; i++ ) { $('#files').append($('<option/>', { value: "a" + i, text : "b" + i })); } 

TTFN John

[Edit] Just to clarify, I want to save all the elements in a droplist, display only their subset, which the user scrolls like a combobox in a normal working application.

Answer 1

First you need to enable the menuWidget method. And then add a class with a limited height value. Js code

 $( "#files" ) .selectmenu() .selectmenu("menuWidget") .addClass("overflow"); 

and CSS

 .overflow { height: 200px; } 

Answer 2

You can also extend the CSS class ".ui-selectmenu-menu.ui-menu" as follows:

 .ui-selectmenu-menu .ui-menu {max-height: 200px;} 

Add this code to a separate css file besides the loaded css jqueryUI library.

Answer 3

Here you are: limiting the list to a certain number of elements in jquery

http://jsfiddle.net/8dgc6jrr/

 var LIMIT = 4; // limit to the fourth element $("option").each(function( index, object ) { if(index+1>LIMIT){ object.remove(); } }); 

Answer 4

In my case, I added CSS code for each menu in which I would like to change the height:

 CSS: #yourMenuID-menu { max-height: 300px; } HTML: <select id="yourMenuID" size="6" class="form-control"> <option value="" selected>All</option> </select> 

"- menu" is added by the jQuery user interface to each menu (select a tag in my case).