ラジオ・ボタンをクリックしてプログラマティックに生成されたコンボ・ボックスを表示/非表示するためのDojoの使用方法？

Question

アプリケーションを実行すると、両方のコンボボックスが表示されます。ラジオボタンをクリックすると、他のものを表示して非表示にする方法は？

ステートとリージョンを静的なjsonファイルに格納し、xhrGetを使用して取得しました。 自動完成のためにdojoコンボボックスを使いたいです。

var cboState; 
 
var cboRegion; 
 

 
dojo.xhrGet({ 
 
       url: "../client/stemapp/widgets/samplewidgets/myProject/common.json", 
 
       handleAs: "json", 
 
       load: function (result) { 
 
        require([ 
 
         "dojo/store/Memory", 
 
         "dijit/form/ComboBox", 
 
         "dojo/domReady!" 
 
        ], function (Memory, ComboBox) { 
 
         var stateStore = new Memory({ 
 
          data: result.states 
 
         }); 
 

 
         var regionStore = new Memory({ 
 
          data: result.regions 
 
         }); 
 

 
         cboState = new ComboBox({ 
 
          id: "state", 
 
          name: "state", 
 
          placeholder: "Select a State", 
 
          store: stateStore, 
 
          searchAttr: "name", 
 
          autocomplete: true 
 
         }, "state"); 
 

 
         cboRegion = new ComboBox({ 
 
          id: "region", 
 
          name: "region", 
 
          placeholder: "Select a Region", 
 
          store: regionStore, 
 
          searchAttr: "name", 
 
          autocomplete: true 
 
         }, "region"); 
 

 
        }); 
 
       } 
 
}); 
 

 
domStyle.set(dom.byId('state'), "display", "block"); 
 
domStyle.set(dom.byId('region'), "display", "none"); 
 

 
On(query('.radio'),'change',function(){ 
 
\t \t \t \t query('.query').forEach(function(divElement){ 
 
\t \t \t \t \t domStyle.set(divElement, "display", "none"); 
 
\t \t \t \t }); 
 

 
\t \t \t \t domStyle.set(dom.byId(this.dataset.target), "display", "block"); 
 
});

<input class="radio" data-target="state" type="radio" name="selection" value="state" > State 
 
<input class="radio" data-target="region" type="radio" name="selection" value="region" > Region 
 
<div id="state" class="query"></div> 
 
<div id="region" class="query"></div>

Answer 1

私はあなたがコンボボックスの作成に対処しましょう、しかし、ここであなたが書いしようとしていたコードがあります。 それはdojo/on

require([ 
 
    'dojo/dom', 
 
    'dojo/dom-construct', 
 
    'dojo/dom-class', 
 
    'dojo/query', 
 
    'dojo/on', 
 
    'dojo/store/Memory', 
 
    'dijit/form/ComboBox', 
 
    'dojo/domReady!' 
 
], function(dom, domConstruct, domClass, query, on, Memory, ComboBox) { 
 
    var stateStore = new Memory({ 
 
    data: [{ 
 
     name: "Alabama", 
 
     id: "AL" 
 
    }, { 
 
     name: "Alaska", 
 
     id: "AK" 
 
    }, { 
 
     name: "American Samoa", 
 
     id: "AS" 
 
    }, { 
 
     name: "Arizona", 
 
     id: "AZ" 
 
    }, { 
 
     name: "Arkansas", 
 
     id: "AR" 
 
    }, { 
 
     name: "Armed Forces Europe", 
 
     id: "AE" 
 
    }] 
 
    }); 
 

 
    var regionStore = new Memory({ 
 
    data: [{ 
 
     name: "North Central", 
 
     id: "NC" 
 
    }, { 
 
     name: "South West", 
 
     id: "SW" 
 
    }] 
 
    }); 
 

 
    var comboState = new ComboBox({ 
 
    id: "stateSelect", 
 
    name: "state", 
 
    store: stateStore, 
 
    searchAttr: "name" 
 
    }); 
 
    comboState.placeAt("state"); 
 
    comboState.startup(); 
 
    
 
    
 
    var comboRegion = new ComboBox({ 
 
    id: "regionSelect", 
 
    name: "region", 
 
    store: regionStore, 
 
    searchAttr: "name" 
 
    }); 
 
    comboRegion.placeAt("region"); 
 
    comboRegion.startup(); 
 

 

 
    on(query('.radio'), 'change', function(event) { 
 
    query('.query').forEach(function(divElement) { 
 
     domClass.add(divElement, 'hidden'); 
 
    }); 
 
    domClass.remove(dom.byId(event.target.value), 'hidden'); 
 
    }); 
 

 
});

.hidden { 
 
    display: none 
 
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css"> 
 

 

 
<input class="radio" data-target="state" checked="true" type="radio" name="selection" value="state">State 
 
<input class="radio" data-target="region" type="radio" name="selection" value="region">Region 
 
<div id="state" class="query"></div> 
 
<div id="region" class="query hidden"></div>