如何使用 Dojo show/hide 通过单击单选按钮以编程方式生成组合框？

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

的简单基本用法

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>

如何使用 Dojo show/hide 通过单击单选按钮以编程方式生成组合框？

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

dojo

combobox