如何使用dojo通过点击单选按钮来显示/隐藏DIV？

Question

默认情况下，应选择状态（State），状态下拉菜单应该出现。如果您选择区域（Region）单选按钮，则应该出现区域下拉菜单。以下是标记。如何使用dojo完成此操作？

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

- Alex W.

---

为什么不在这里使用简单的JS？ - Bourbia Brahim

我们正在尝试避免使用原生JS和其他库，严格使用Dojo，而我以前从未有过任何经验。 - Alex W.

Answer 1

一个简单的JS脚本就足够了，但如果你想用Dojo来制作它，请看我的jsFiddle：

我已经在HTML中添加了一些data-attribute，以便使其全局化，如果您想添加其他输入，则可以使用它们。

Dojo中的解决方案

Dojo中的JS代码：

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

- Bourbia Brahim