[SOLVED] iPhone scroll-wheel picker for <select> menus

iPhone scroll-wheel picker for <select> menus

I'm developing a UIWebView iPhone app and mobile website and within the app I have many <select> menus that contain 100+ items each!

I was wondering if there is a way to break the <select> menu into submenus in order to make it easier for iPhone users to make selections, ex:

I have this for my database setup:

                   |   Subcategory     |      Food      |
                   --------------------------------------
                   |eggs and cheese    |scrambled       |
                   |breakfast cereal   |frosted flakes  |
                   |breakfast cereal   |mini wheats     |
                   |breakfast cereal   |cherrios        |

So each item has a "sub-category" and then the actual "food"

I print that into dropdowns like this:

<select class="breakfast">
  <option value="100" rel="20">Breakfast Cereal (Frosted Flakes)</option>
  <option value="200" rel="10">Breakfast Cereal (Cheerios)</option>
  <option value="150" rel="25">Breakfast Cereal (Mini Wheats)</option>
  <option value="300" rel="30">2 Eggs and Cheese (scrambled)</option>
</select>

And when I touch the dropdown on the iPhone to make a selection, all 4 options are listed in that scroll wheel UI that iPhone defaults to:

I would somehow like to set it up so that I can have 2 scroll wheels with the Subcategories on the left and then once you pick that, it gives you the options for "food" on the right, like this (but with only 2 wheels):

_{(source: iphoneized.com)}

This example would be a scroll wheel on the left with 2 options, Eggs and Cheese and Breakfast Cereals, then when the user touches Breakfast Cereals, it would load the 3 cereal options into the scroll wheel picker UI on the right!

This is a little complicated, but does anyone have experience with this, or is it even possible??

Solution