By default, State should be selected and State dropdown should appear. If you select Region radio button, Region dropdown should appear. Below are the markups. How to use dojo to do this?
<input type="radio" name="selection" value="state" checked> State
<input type="radio" name="selection" value="region" > Region
<div id="state">
<select name="State">
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
</select>
</div>
<div id="region">
<select name="Region">
<option value="se">South East</option>
<option value="ne">Northern Central</option>
</select>
</div>
A simple js script is sufficient , but if you want to made it in Dojo , see my jsFiddle :
I have add some data-attribute in html to make it global if you want to add other inputs
js code in dojo :
require([
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-style',
'dojo/query',
'dojo/on',
'dojo/domReady!'
], function (dom, domConstruct,domStyle,query,On) {
domStyle.set(dom.byId('state'), "display", "block");
domStyle.set(dom.byId('region'), "display", "none");
On(query('.radio'),'change',function(){
query('.combo').forEach(function(divElement){
domStyle.set(divElement, "display", "none");
});
domStyle.set(dom.byId(this.dataset.target), "display", "block");
});
});