Dojo Form Widgets – dijit.form.FilteringSelect

Recently I wrote in some functionality that used the dijit.form.FilteringSelect widget from the dojotoolkit and had a special use-case, not discussed in the documentation.

EDIT: Use dijit.byId(‘myFilteringSelect’).attr(‘displayedValue’); Instead, the rest can stay for historical purposes (assuming there would be any).

Let’s say you have a basic FilteringSelect widget. Look at the example below:

<select id="myFilteringSelect" name="myOptions">
   <option value="1">Something</option>
</select>

If you want to grab the current value of a widget, it’s simple:

var currentSelection = dijit.byId('myFilteringSelect').attr('value');
console.log('Current Selection: ' + currentSelection);
// Outputs 'Current Selection: 1'

What if for some reason, you want the Displayed value of the widget? What this whole post is for:

var currentSelection = dojo.byId('myFilteringSelect').value;
console.log('Current Selection: ' + currentSelection);
// Outputs 'Current Selection: Something'

See the difference? We used dojo.byId instead of dijit.byId. When using the FilteringSelect widget, the place where the current option value is stored is within the widget, but dojo creates an underlying form input on the page with the id you gave your widget, and pops the display value there, the value you see in the box once you’ve selected something. So by simply using normal javascript to select it’s value via .value, we can grab that for use.

Not in the docs for FilteringSelect, and maybe there’s other issues with your code if you find yourself here, but for me, i needed the word, not the number, and had no control over how the html select was created. So there you go.