在dojo filteringSelect onChange中设置第一项

我试图解决在dojo中加载两个相关下拉列表国家/州的老问题

我有两个筛选选项来保存国家和州的列表。当用户选择一个国家时，我能够过滤状态列表。但是，我无法为当前选定的国家设置州列表中的第一个值

在下面的例子中，美国和加拿大是唯一的国家。在页面加载时，“US”和“Alabama”默认正确显示。当我切换到“加拿大”时，我注意到该州的列表现在包含了加拿大的所有省份，但是我仍然看到“阿拉巴马”仍然被列为该州。如何以编程方式设置加拿大省或美国第一个州的第一个值。我正在尝试将筛选选择中的第一项设置为默认值

谢谢你的阅读。这是我到目前为止所拥有的

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>

---

LoadState不在您调用它的范围内。试试这个：

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){
    ...
}

或者，您也可以使用lang.hitch：

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

            }));
    ...   
}));

function loadStates(country){
    ...
}

---

LoadState不在您调用它的范围内。试试这个：

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){
    ...
}

或者，您也可以使用lang.hitch：

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

            }));
    ...   
}));

function loadStates(country){
    ...
}

---

_在loadStatescountry之后，我可以调用下面列出的方法。然而，对于一项简单的基本任务来说，这似乎过于复杂了函数setDefaultStatecountry{var filteringSelect=dijit.byId'mystate'；filteringSelect.store.fetch{query:{countryId:country}，onComplete:functionitems，request{console.logitems.length；if items.length>0{filteringSelect.setValuerequest.store.getValueitems[0]，mystate；}else{filteringSelect.setValue；}}}}；}我可以在LoadStateSEntry之后调用下面列出的方法来解决问题。但是，对于一个简单的基本任务来说，这似乎过于复杂了。function setDefaultStatecountry{var filteringSelect=dijit.byId'mystate'；filteringSelect.store.fetch{query:{countryId:country}，onComplete:functionitems，请求{console.logitems.length；如果items.length>0{filteringSelect.setValuerequest.store.getValueitems[0]，mystate；}否则{filteringSelect.setValue；}}；}