如何使用Dojo通过单击单选按钮显示/隐藏programmaticaly生成的组合框？

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(){
				query('.query').forEach(function(divElement){
					domStyle.set(divElement, "display", "none");
				});

				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

的简单基本用法

＆＃13;

＆＃13;

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');
  });

});

＆＃13;

.hidden {
  display: none
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;