Looking for something that's not here? Let us know: support@tiggzi.com

Building a dynamic drop down list

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

  1. Create a new app and build the following simple UI:


    Both components are SelectMenu components
    The first lists consists of: fruits, vegetables. Set the component name to typeList
    The second list consists of: orange, apple, banana. Set the component name to: dynamicList

  2. Add Value Change event to the first list
  3. Add Run Custom JavaScript to the event.
  4. Add the following JavaScript code:

    var selectedValue = this.value;

    var data = { 'fruits': ['orange', 'apple', 'banana'], 
                 'vegetables': ['onion', 'carrot', 'tomato']
    };

    var dropDown = $('[name=dynamicList]');
    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.