Programmatically set the selected value of a dijit Select widget

user965951 picture user965951 · Oct 24, 2011 · Viewed 25.4k times · Source

I'm populating a dijit select widget with options whenever another select widget's value changes.

In my app, theres a dropdown menu for "Bus Route" and a dropdown menu for "Bus Stop". Users have assigned bus routes and stops that should be updateable.

So when the page first loads, the route dropdown box has all routes available, and the route you are currently assigned to is the selected value. The stop menu is loaded with all stops associated with that route, but there is no selected value, so, as by default, it's the first option.

Whenever the user changes the currently selected route, the stop menu changes accordingly and is populated with all stops associated with that route.

My question is, with dojo, how can I set the "Selected" option in the stop menu?

I want it to be clear which stop is currently assigned to that user, instead of the "selected" stop being the first option in the route.

Thanks.

Answer

Ken Franqueiro picture Ken Franqueiro · Oct 24, 2011
selectWidget.set("value", someValue);

If you are specifying options via the options property (array of objects with label, value, etc.), then someValue should match the value of one of those objects. (Note that you can also specify selected: true right within one of the objects in the array passed to options.)

If you are providing items from a dojo.data store via the store property, then someValue should match the identity of one of the store's items.

(edit) NOTE: I assumed above that by "dijit select widget" you are referring to dijit.form.Select. If you are actually using dijit.form.ComboBox or dijit.form.FilteringSelect, the same line of code still holds true, as applicable to stores in the last paragraph. In the case of declarative instantiation with a select tag, ComboBox and FilteringSelect still create a store, whose items' identities are the values of the options within the select tag.