Mo-Menu | A simple drop-in jQuery mobile menu solution | Frontend Framework library

From JQM documentation:

Custom select menu

The custom select uses a popup with a listview to display the menu. For long lists a dialog will be used.

If You need to stick some elements inside, and scroll only the long list of items, the framework will always display a popup, because the resulting total height of the list items will never exceed the screen height.

So, the problem here is to compute the maximum height of the submenu-listview that does not exceed the screen height, to tell the framework that the scrollable dialog page is not needed here anymore.

EDIT: Hotfix for mobile popup repositionTo: "origin" on window resize

JQM has its own naming convention.

For instance: the popup which will be created to show a short list of options, will get its own id that is composed by concatenating the "id" of the select followed by the keyword "listbox-popup".

the dialog-page which will be created to show a long list of options exceeding the page height, will get its own id that is composed by concatenating the "id" of the select followed by the keyword "dialog".

So, after thinking about it, I believe the filterable is needed only when a dialog-page will be displayed, as the choice between popup and dialog-page is made dynamically, every time the select is opening.

Therefore the code is even simpler, as the JQM built-in data-filter option can be used here:

HTML:

Figured it out, corrected Javascript is below. A line was missing.

The issue does not lie in the slicing (although you could also directly index with [2]). However, you reinitialize menus in the loop. So for every run of the loop, you overwrite what was previously there. This should fix it:

You can export the adding of listeners to a method.

The issue could be that you are duplicating the id value across multiple menu elements (MDL will get confused if there is more than one button with an id value that matches the for value on your menu element). You could add a numerical increment to your id and for values to ensure that each menu is uniquely identified.

See the following example. Note that Object.assign is used to shorten the code a bit, but due to limitations we still need to use setAttribute to set the for attribute of the ul element since that attribute is not directly accessible.

First of all, establish a charset on your html, cause this will probably give you bigger trouble especially, when you escalate it, then, mind in your B component (Ln 33):

You can dynamically build your menu.
You just have to get a hold of the element reference, and not the element name.

You can use @ViewChild and @ViewChildren for this purpose.

Here is a working example of your code.

change the css of MDL