2

私は、道場に2つの依存するドロップダウン（国/州）をロードするという昔からの問題を解決しようとしています。

国と州のリストを保持するために、2つのフィルタリング選択があります。ユーザーが国を選択したときに、状態リストをフィルタリングできます。ただし、現在選択されている国の州のリストから最初の値を設定することはできません。

以下の例では、米国とカナダだけが国です。ページの読み込み時に、「US」と「Alabama」はデフォルトで正しく表示されます。「CANADA」に切り替えると、州リストにすべてのカナダの州が含まれていることに気付きましたが、「アラバマ」がまだ州としてリストされていることがわかります。カナンディアン州または最初の米国州の最初の値をプログラムで設定するにはどうすればよいですか。フィルタリング選択の最初の項目をデフォルト値として設定しようとしています。

読んでくれてありがとう。これが私がこれまでに持っているものです。

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>
4

1 に答える 1

0

loadStates() は、呼び出しているスコープの外にあります。これを試して：

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){
    ...
}
于 2013-12-09T22:21:32.610 に答える