Setting a Valid Default Selection
It's fairly common practice to pre-select a default value from the list. For instance, we might want to set the state and city lists to the user's. This is not the easiest thing to do in JavaScript because you have to know the item's listIndex (e.g. document.getElementById('state').selectedIndex = 60; ). Dojo completely sidesteps the issue by supporting the value property. Using it, setting the state to Kentucky is simply a matter of including the value="KY" attribute in the HTML tag, or query: {state: 'KY'} in the JavaScript Object code.
Setting the cities list is almost as easy. To retrieve all of the cities for the state of Kentucky, we can set the query attribute to the following: query="{state: 'KY'}". That will initialize the list. Setting the textbox value is accomplished via the displayedValue property. In comparison to a regular Select listbox, the value property is the option code, while the displayedValue is the option text. Hence, adding the code displayedValue: 'Lexington' to the city widget declaration will populate the textbox with that city. In fact, nothing is being selected from the list because, unlike the state data store, the city one has no identifier (code) values. If it did, we could set the value like we did with the State list.
Now both lists will be properly initialized with default values:
Clearing the Previous Selection
Setting the query to the state in the parent's onChange() event repopulates the city list but it does not clear out the previous value. That's because the list and the textbox are really two different controls. To clear it you have to call the setter on the displayedValue property: this.set('displayedValue', '');. That works, but there is a problem in that, if your listbox is required, setting it to a blank value will trigger a validation error. This can be avoided by turning off the required flag before setting the displayedValue and then restoring it to its original state afterwards:
Here are the files containing today's modifications.
Thanks to the Dojo programmatic widget declaration model and the dojo.connect() method, it's possible to set a child list's contents based on a selection in the parent using relatively little code. Moreover, many behavioral aspects of your chained selects can be implemented by extending the existing FilteringSelect class. The choice to create your own custom widget based on the FilteringSelect really hinges on whether or not you want your chained select to be its own distinct widget type.
Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .
resides in Ottawa, Canada, and is the founder of GravelleConsulting.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. Rob to receive a free estimate on your software project. Should you hire Rob and his firm, you'll receive 15% off for mentioning that you heard about it here!
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).
Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!
Original: January 18, 2011
Find a programming school near you