Définir le premier élément dans dojo filteringSelect onChange

Question

J'essaie de résoudre le vieux problème du chargement de deux listes déroulantes dépendantes (pays/états) dans le dojo.

J'ai deux sélections de filtrage pour contenir la liste des pays et des états. Je suis capable de filtrer la liste d'état lorsque l'utilisateur sélectionne un pays. Cependant, je ne suis pas en mesure de définir la première valeur de la liste des états pour le pays actuellement sélectionné.

Dans l'exemple ci-dessous, les États-Unis et le CANADA sont les seuls pays. Au chargement de la page, 'US' et 'Alabama' apparaissent correctement par défaut. Quand je passe à 'CANADA', je remarque que la liste d'état contient maintenant toutes les provinces canadiennes, mais je vois encore que 'Alabama' est toujours répertorié comme étant l'état. Comment puis-je définir la première valeur de la province canandienne ou du premier État américain par programme? J'essaye de placer le premier article dans la sélection de filtrage comme valeur par défaut.

Merci d'avoir lu. Voici ce que j'ai jusqu'ici.

var countries = { 
    label: "name", 
    identifier: "countryId", 
    items: [ 
      {countryId: "USA", name: "United States of America"}, 
      {countryId: "CAN", name: "Canada"}, 

        ] 
}; 

var states = { 
    label: "name", 
    identifier: "stateId", 
    items: [ 
     {stateId: "NJ", name: "NewJersey", countryId: "USA"}, 
      {stateId: "IL", name: "Illinois", countryId: "USA"}, 
      {stateId: "CO", name: "Colorado", countryId: "USA"}, 
      {stateId: "OH", name: "Ohio", countryId: "USA"}, 
      {stateId: "AL", name: "Alabama", countryId: "USA"}, 
      {stateId: "ON", name: "Ontario", countryId: "CAN"}, 
      {stateId: "BC", name: "British Columbia", countryId: "CAN"}, 
      {stateId: "QC", name: "Quebec", countryId: "CAN"}, 
    ] 
}; 

dojo.addOnLoad(function() { 
    dojo.connect(dijit.byId('mycountry'), 'onChange', function (country) { 
     console.log("on change event fired"); 
     loadStates(country); 
     // set the default state after loading countries, after onChange event. 
     var firstStateinFilteringSelect = ???? 
     dijit.byId('mystate').attr('displayedValue', firstStateinFilteringSelect); 

     }); 
    // on page load, load only US states (US is set as a default country) 
    // the default state is set to "Alabama" 
    loadStates(dijit.byId('mycountry').attr('value'));  
}); 

function loadStates(country){ 
    console.log(country); 
      dijit.byId("mystate").query = {countryId: country}; 
} 

</script> 
<div dojoType="dojo.data.ItemFileReadStore" 
    jsId="countryStore" 
    id="countryStore" 
    data= "countries" 
</div> 
<select id="mycountry" 
    name="country" 
    dojoType="dijit.form.FilteringSelect" 
    store="countryStore" 
    searchAttr="name" 
    required="true" 
    value="US" 
    trim="true">  
</select> 

<div dojoType="dojo.data.ItemFileReadStore" 
    jsId="stateStore" 
    id="stateStore" 
    data= "states" 
    </div> 

<select id="mystate" 
    name="state" 
    dojoType="dijit.form.FilteringSelect" 
    store="stateStore" 
    searchAttr="name" 
    required="true" 
    value="AL" 
    trim="true">  
</select> 

Answer 1

loadStates() est hors de votre portée où vous l'appelez. Essayez ceci:

var thisWidget = this; 

dojo.addOnLoad(function() { 
    dojo.connect(dijit.byId('mycountry'), 'onChange', function (country) { 
     ... 
     // loadStates doesn't exist inside this function, so it has to be called 
     // like this 
     thisWidget.loadStates(country); 
     ... 

     }); 
    ... 
}); 

function loadStates(country){ 
    ... 
} 

Alternativement, vous pouvez simplement utiliser lang.hitch:

dojo.addOnLoad(lang.hitch(this, function() { 
     dojo.connect(dijit.byId('mycountry'), 'onChange', lang.hitch(this, function (country) { 
      ... 
      loadStates(country); 
      ... 

      })); 
    ... 
})); 

function loadStates(country){ 
    ... 
}