jQuery selectmenu dropdown height

jquery select-menu
Jon Evans picture Jon Evans · Aug 25, 2014 · Viewed 14.9k times · Source

I want to limit the number of items in a dropdown list, lets say to 6. After quite a search I can't find anything other than a hint there is a maxHeight option, but that appears to have no 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, Jon

[Edit] Just to clarify, I want to keep all the items in the droplist, only display a subset of them that the user scrolls through like a combobox in a normal deskop application.

Answer

Anand M Arora picture Anand M Arora · Jul 3, 2015

You can also extend the CSS class of ".ui-selectmenu-menu .ui-menu" like this:

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

Note: Add this code in separate css file other than the downloaded css library of jqueryUI.

Related questions

How to handle jQuery UI Selectmenu change event

i use jquery ui select menu with custom render option how i can handle the change event ? i try $('#filesA').on('change', function() { alert( 'x'); }); but its not working with jQuery UI Selectmenu and also i try $( "#filesA" ).selectmenu({ …

Read More
jQuery UI Selectmenu value set dynamically does not change visible selected value

I am using jQuery UI Selectmenu and am having trouble setting the value of a rendered selected. It seems to change the selected option in the underlying select, but the selectmenu does not show the change. I am calling .selectmenu(…

Read More
Use jQuery on HTML Select Menu for Birthday/Date of Birth format

I'm looking to have a standard HTML select menu for selecting your date of birth. Day, Month, Year. Can someone point me in the right direction to use jQuery to format the correct number of days in the month depending …

Read More