Dynamic Select Box Options

Intro:

This example demonstrates how to use JavaScript to dynamically adjust the results of a select box based on other values entered on the screen. In this example, we're using a series of dynamic select boxes that adjust based on values that are entered into previous select boxes but the same principals apply to any Profound UI widget. 

This particular example uses database-driven properties to load the data into the select box widgets. The JavaScript is used to change the database-driven properties in such a way that selecting an option from one select box will directly affect the options that you have in another select box. In this case, we are using State → County → City data to show how this works.

Building the Example:

To start, we put together a screen that looks like this:

Open

This is a very simple screen that uses a panel, label and select box widgets from the Blueprint widget set. Now that we have our screen set up to look how we’re wanting, we can configure the select boxes to show data.

Setting up the Select Boxes:

1. Configure the first select box to show the available states

   1. Give the select box an ID of state (this ID is case-sensitive)

   2. Set the choices database file to CITIES

   3. Set the choice options field and choice values field to STATE

      1. This is the name of the field in the CITIES table that holds the names of various states

   4. (Optional) Set the order by property to STATE

2. Configure the second select box to show the available counties

   1. Give the select box an ID of county (this ID is case-sensitive)

   2. Set the choices database file to CITIES

   3. Set the choice options field and choice values field to COUNTY

   4. Set the choices selection criteria to STATE = ?

      1. This property is equivalent to the WHERE clause in an SQL statement

      2. This property will make it so that only counties associated with a given state will be shown

      3. The parameter ( ? ) will be set using JavaScript

3. Configure the third select box to show the available cities

   1. Give the select box an ID of city (this ID is case-sensitive)

   2. Set the choices database file to CITIES

   3. Set the choice options field and choice values field to CITY

   4. Set the choices selection criteria to COUNTY = ?

      1. This property is equivalent to the WHERE clause in an SQL statement

      2. This property will make it so that only cities associated with a given county will be shown

      3. The parameter ( ? ) will be set using JavaScript

Here’s what the properties of each of these select boxes looks like after configuring the settings mentioned above:

 

Open

STATE select box

SELECT STATE FROM CITIES

 

SELECT COUNTY FROM CITIES WHERE STATE = ?

 

SELECT CITY FROM CITIES WHERE COUNTY = ?

JavaScript:

This portion of the example is where we’ll configure these select boxes to be dynamic and offer different data based on the previous select box choice. In this example, we want the data to change after selecting an option in the previous select box. So, the JavaScript code used for this will be placed in the onchange event.

1. Place the following code in the onchange event of the STATE select box:

   //Change the 'choices parameter value' property of the 'county' select box //The value used for this will be the value selected for this 'state' select box applyProperty("county", "choices parameter value", get(this)); //Reapply 'field type' so that the widget is rendered with correct options applyProperty("county", "field type", "select box");

   1. This code sets/changes the parameter for the choices selection criteria property set for the COUNTY select box

   2. Once this code runs, the statement will look like WHERE STATE = selected_state_name

2. Place the following code in the onchange event of the COUNTY select box:

   //Change the 'choices parameter value' property of the 'city' select box //The value used for this will be the value selected for this 'county' select box applyProperty("city", "choices parameter value", get(this)); //Reapply 'field type' so that the widget is rendered again with correct options applyProperty("city", "field type", "select box");

   1. This code sets/changes the parameter for the choices selection criteria property set for the CITY select box

   2. Once this code runs, the statement will look like WHERE COUNTY = selected_county_name

Result:

After configuring your database-driven select box widgets and coding the JavaScript that will change the data based on previous selections, you should see that selecting an option from the STATE select box sets the data for the COUNTY select box. Selecting an option from the COUNTY select box should then set the data for the CITY select box. See below for how this looks when running the application: