Dojo Select - first option getting selected by default

Question

I have a select box on my form which is getting displayed using addOption. Below the code for the same

storeData = response.myData;
var select = dijit.byId('mySelect');
select.addOption(storeData.items);

HTML declaration of Select box

<select id="mySelect" data-dojo-type="dijit/form/Select" data-dojo-attach-point="mySelect" data-dojo-props="name:'mySelect', placeHolder: 'Select a value', value:''"></select>

In the storeData, I am returning list of JSON objects including a blank option. (label="" and value=" ");

I want the place holder text to get displayed when no option is selected. But by default first option (i.e. blank value option) is getting selected and because of that place holder text is not getting displayed. If I remove the blank value option from list of options, then the option after that is getting selected by default.

Is there any way where I can set the selection to none. Any pointer for this issue?

Answer 1

dijit/form/Select acts as a normal selection box element (simply said it's an enhanced form of <select>). It's the default behavior of such a select box to select the first option by default.

Either way, the dijit/form/Select widget does not support placeholders I think, neither is it documented in the API docs.

As an alternative you could use the dijit/form/ComboBox or dijit/form/FilteringSelect widget, which both support the placeHolder property.

Another common practice (at least with <select>) is that you add a default selected and disabled item, which acts as your placeholder, for example:

<select name="select1" data-dojo-type="dijit/form/Select">
    <option disabled="disabled" selected="selected" value="">- Select a state -</option>
    <option value="TN">Tennessee</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="FL">Florida</option>
    <option value="CA">California</option>
</select>

Demo: JSFiddle