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>

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??


  • I solved my problem here: Add a search function to UIPickerView in Xcode, or open <select> menu in UITableView

    I filter the results outside of the app, through the website using jQuery.