Hi there Dojo developers, I have a drop down form.select, and it has few options, how do set an option to be selected. Say I want to have the third option displayed in the select element. I was looking at the dojo docs and I do not see setSelected() or similar.

Thanks

Hi there Dojo developers, I have a drop down form.select, and it has few options, how do set an option to be selected. Say I want to have the third option displayed in the select element. I was looking at the dojo docs and I do not see setSelected() or similar.

Thanks

• javascript
• dojo

• 2 try selectWidget.set('value', your_option_value) inside – Sergii Stotskyi Commented Aug 22, 2012 at 16:58
• Thanks serjio, it is attr, but you gave me the right direction, found answer here : stackoverflow./questions/2215979/… – setlio Commented Aug 22, 2012 at 17:26
• it's not important. The main thing is that it was helpful for you, enjoy ;) – Sergii Stotskyi Commented Aug 22, 2012 at 21:16
• Strange just realize that to pull the selected option I have to reselect it from the drop own. Basically it sets the selected option only visually, when I try to get it programmatically it does not return the one visually selected but the first on the list. – setlio Commented Aug 24, 2012 at 0:20

3 Answers 3

You need to use displayedValue property in addition to value to set the displayed option. Use something like:

selector.set("displayedValue", "the_text_of_the_option");

or you can search the underlying store of your drop down by using :

selectorStore.fetch({query:{id: value}, onComplete: function (items) {
              dojo.forEach(items, function(item){
                  selector.set("displayedValue", "the_text_of_the_option");
                  selector.set("value", "the_value_of_the_option");
              });
}});

Hope that helps.

I found it, it is selector.attr("value", "the_name_of_the_option");

Thank you, this is true and working. I have tested it. However i discovered my bug: I was creating the options dynamically, and when I set .selected = true as soon as I add it to the selector it changes the sated to the first one being selected. Or if I apply selector.set("displayedValue", "the_text_of_the_option"); It displays visually the selected one but in fact behind the selected is still the first one does not meter if I change it with the above selector.set. So I solved it by manually creating the selected state. This way when I add it letter id stays in the desired one and changes it accordingly.

Snipped here:

    //populate latitude selector
    match = false;
    optionsArr = [];
    for(var i = 0; i < namesLength; i++){
        for(var j = 0, len2 = latNames.length; j < len2; j++){
            if(fieldNames[i].toLowerCase() == latNames[j]){

                for (var a = 0; a < namesLength; a++) {
                    var option = {};
                    option.label = fieldNames[i];
                    option.value = i+"";
                    if(i==a){
                        option.selected = true;
                    }
                    optionsArr.push(option);
                }
                    match = true;
            }
        }
    }
    if(match){
        var drop1 = dijit.byId("selectLatitude");
        drop1.addOption(optionsArr);
    }else{
        var drop1 = dijit.byId("selectLatitude");
        drop1.addOption(options);//options is an array of options created originally
    }