dijit.form.Select won't set value programmatically

whomer picture whomer · Jun 22, 2012 · Viewed 15.6k times · Source

I have a dynamic dojo form in which I have a dijit.form.Select whose selected value I have tried to set dynamically through various ways. I get the select widget to load and show the data, but it always ignores my every attempt. I am using dojo 1.7.

        var bcntryval = <?= $this->billingContact->countryId;?>;
    var countryStore;



    function onBillingShow() {
        if (countryStore) countryStore.close();
        countryStore = new dojo.data.ItemFileReadStore({url: 'CartUtilities.php?action=getcountries'});
        dijit.byId("bcntry").setStore(countryStore, bcntryval);  // does not set value! but does set the store
        dijit.byId("bcntry").attr('value', String(bcntryval)); // doesn't set the value either
                    dijit.byId("bcntry").set('value', bcntryval));  // nor does this!
    }

My markup for the bcntry widget is as follows:

<td><input data-dojo-type="dijit.form.Select" style="width: 10em;" data-dojo-props="sortByLabel:false, maxHeight:'-1'" data-dojo-id="bcntry" id="bcntry" name="bcntry" />

I've invested a fair amount of time on learning dojo. When it works its nice, but the docs leave a lot to be desired! I am also seeing a similar problem with the dijit.form.FilteringSelect. That also ignores setting the value via javaScript. I've also tried completely programmatic versions of this code. I have come to the conclusion that setting the value just doesn't work when you're selecting from a store. This DID work, but its not dynamic.

              <div name="scntry" data-dojo-type="dijit.form.Select" data-dojo-props="maxHeight:'-1',sortByLabel:false" value="<?= $this->shippingContact->countryId;?>" >
              <?php foreach($this->countryList as $c):?>
                 <span value="<?= $c->id;?>"><?= $c->name;?></span>
              <?php endforeach;?>         
              </div>

Answer

mschr picture mschr · Jun 23, 2012

The reason most likely is, that youre trying to set the value of the 'searchAttr'. Instead you would want to set value to the 'identifier'.

Answer is here, check the timeout function on bottom shelf: http://jsfiddle.net/TTkQV/4/

The trick is to set the value as you would set option.value (not option.innerHTML).

normalSelect.set("value", "CA");
filteringSelect.set("value", "AK");