Not able to select any options in dojo Select

Question

I am using dojo 1.6 and the problem I have encountered is quite unique. Check out the following code:

var dd = new dijit.form.Select({
        id: 'dd', 
        options: [{label:'option1'}, {label: 'option2'}],
    }); 
dojo.connect(dd, "onChange", this, function (){
        console.debug("trying to catch the change");
    });

So as per the above code I should be getting a drop down and be able to change the value in the drop and catch the event in dojo.connect. While I do get a drop down which by default has option1 selected, however I am not able to select option2. Please note that both the options are visible in the drop down but the selection doesn't work. I am fairly new at dojo but from all the examples this seems to be the minimum requirement to make a drop down. I would appreciate any feedback. EDIT: So turns out if I set options like [{label: 'option1', value: 1}, {label: 'option2', value:2}] then everything works as I want to. But can some one please explain what is the role of value here and why does it have to be in integer all the time?

Answer 1

The value is the text that will be sent to the server if you submit a form containing your select.

It's similar to an option tag with a value attribute: <option value="op1">option1</option>. If you omit the value attribute on tag, the submitted text will simply be the label text "option1".

The values don't have to be integers - you can have options with {label: foo, value: foo}, as long as foo is unique among the options. If you omit the value property here, the submitted value will be undefined, and the dijit will (as you've noticed) behave generally strange.

Edit after a bit of experimentation: When using the Select dijit, the values in the options array (or, in fact, the ids in a store) must be strings. Otherwise, giving the select a default value will not work. E.g.:

new Select({
    value: 3,
    options: [ {label: "foo", value: 1}, {label: "bar", value: 3}]
})

.. will not set "bar" as the default selected option, and highlighting the selected item in the dropdown doesn't work. You have to use an option array with string values:

    options: [ {label: "foo", value: "1"}, {label: "bar", value: "3"}]

Not 100% sure about the reason behind this.