How to work with Select menu <Select> with a large number of options #&ui-state=dialog problem?
I have created a dropdown box using <select> <option> using data-native-menu="false" to get the JQuery Mobile look and feel
This is a basic form that allows the user to select the state they live along with some other basic info
The select menu is a list of all the states in the US.
Example:
<label for="state"><b>Select State:</b></label>
<select name="state" id="state" data-native-menu="false">
<option value="">State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
................
Here is the problem:
When the user submits the form, the data is posted and saved to a MYSQL database via PHP. However, I have noticed that this only works when the list of options is small enough to fit on the screen.
Given the number items in this list (50 states), JQuery Mobile creates a new page(#&ui-state=dialog) to accommodate the size.
However, when you select a state, you can see in the field that a state was selected but the form will not submit. If is it the datatype is somehow altered when JQuery Mobile creates the new page #&ui-state=dialog
However, if I shorten the size of the list to let's say 15 items, it passes the selected data to the database with no problems.
So it appears that I do not know how to access the data when the #&ui-state=dialog url is loaded for a select menu with many options. Maybe the overylay isn't passing the selected data back to the calling page.
From what I seen, this is a bug with JQuery Mobile. The only solution that I found at this point is to remove data-native-menu="false" and go native but I wanted to maintain the look of the custom Jquery Mobile dialog.
Has any seen this problem and know of a solution?
Thanks