Can't access elements from large select lists

I have created a dropdown box using <select> <option> using data-native-menu="false" to get the JQuery Mobile look.

It is a list of all the states in the US.
So it is a large Select list.

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:
I am passing the user selection from the the list to a MYSQL database using PHP.

Given the number items in this list, JQuery Mobile creates a new page(#&ui-state=dialog) to accomodate the size. However, when you select a state, you can see in the field that a state was selected but PHP cannot see the selection so it does not pass the data to the database.

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 large select list.

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".

Has any seen this problem and know of a solution?



Thanks

It seems that my only option at this point is to make several smaller <select><option> lists if I want to use JQuery's custom menus.