Building a dynamic select menu

This tutorial will show you how to build a dynamic select menu. The second drop down list depends on the value selected in the first drop down.

1. Create a new page and build the following UI:
   Both components are SelectMenu components
   The first lists consists of: Fruits, Vegetables. Set the component name to: list1
   The second list consists of: Orange, Apple, Banana. Set the component name to: list2
2. Add Value Change event to the first list
3. Add Run JavaScript to the event
4. Add this JavaScript:

   var selectedValue = this.value;
   var data = { 'Fruits': ['Orange', 'Apple', 'Banana'],
                'Vegetables': ['Onion', 'Carrot', 'Tomato']
   };
   var dropDown = $('[name=list2]');
   dropDown.html('');
   var newData = data[selectedValue];
   for(i = 0; i < newData.length; i++) {
      dropDown.append('<option value=​"' + newData[i] + i + '">​' + newData[i] + '</option>');
   }
   dropDown.selectmenu('refresh');

5. Test the app