Wie verwende ich Dojo, um programmatisch generierte Kombinationsfelder anzuzeigen/auszublenden, indem Sie auf Optionsfelder klicken?

Question

Wenn ich meine Anwendung ausführen, werden beide Kombinationsfelder angezeigt. Wie man einen zeigt und den anderen ausblendet, wenn man Radio Buttons anklickt?

Ich speicherte den Zustand und die Region in einer statischen JSON-Datei und verwenden Sie xhrGet, um sie zu erhalten. Ich möchte Dojo-Kombinationsfeld für die automatische Vervollständigung verwenden.

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

Ich lasse Sie mit der Erstellung der Combobox beschäftigen, aber hier ist der Code, den Sie schreiben wollten. es ist eine einfache und grundlegende Verwendung von 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>