Loading a drop down box based on selection in another drop down box

[dustinmiles]

I have created two drop down boxes on my screen.

The first one I have specified with a few hard coded choices. The second one I have setup to get the choices from a database file using a selection based on the value of the first drop down box.

I would like the user to be able to select a value from the first drop down and have the second drop down populate with choices based on the value of the first, but I'm not sure what javascript code to use to get the field to "refresh" in the onchange event of the first drop down.

Any help would be appreciated.

[Scott Klement]

You can do this in JavaScript When one dropdown changes, change the choices in the 2nd dropdown.

A frequent technique is to use a database-driven drop down, and when the firset dropdwon chnanes use applyProperty() to set the value to query for in the second dropdow, then apply the field type properrty to make it re-load the second widget from the database.

There have been examples posted in these forums in the past, you could search for them.

[dustinmiles]

I did search before I posted

I was able to get the second dropdown to re-render by using the method that you mention, applyProperty(). Resetting the field type to select box causes the field to re-render and get my new choices. That was my missing piece.

This is my onclick event for the first drop down.

Code: Select all

applyProperty("DropDown2", "choices parameter value", this.value);
applyProperty("DropDown2", "field type" "select box");

 

The first line sets the database selection parameter of the second box and then the second line causes it to re-render.

[dustinmiles]

Scott, thanks for your reply, it was the missing piece I needed; getting the control to re-render.

[Scott Klement]

Great! Glad to hear you figured it out!

[dustinmiles]

Is it possible to use the same technique with a grid?

I am using my second drop down selection to change the parameter on a custom sql statement for a grid but it does not seem to be refreshing.

I have tested the custom sql statement without a parameter and it loads data perfectly.

This technique works for the drop down but not for the grid. This is what I'm doing in the onchange event on my drop down:

Code: Select all

applyProperty("RanGrid", "parameter value", this.value);
applyProperty("RanGrid", "field type", "grid");

[dustinmiles]

Found it

Rendering the grid doesn't cause the data to reload like it does on a drop down. Need to call the refresh method

Code: Select all

getObj("RanGrid").grid.refresh();

[Scott Klement]

You've got it... refresh() is the correct thing to re-load a database-driven grid.