how to use Dojo to show/hide programmaticaly generated combo boxes by clicking radio buttons?

问题

When I run my application, both combo boxes show. How to show one and hide the other one when clicking radio buttons?

I stored the state and region in a static json file and use xhrGet to get them. i want to use dojo combo box for auto-complete.

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>

回答1:

I let you deal with the creation of the combobox, but here is the code you were trying to write. it is a simple and basic use of 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>

来源：https://stackoverflow.com/questions/36991897/how-to-use-dojo-to-show-hide-programmaticaly-generated-combo-boxes-by-clicking-r