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

时间:2016-04-29 19:38:22

标签: html button dojo radio

默认情况下,应选择State并显示State下拉列表。如果选择“区域”单选按钮,则应显示“区域”下拉列表。以下是加价。如何使用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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

一个简单的js脚本就足够了,但是如果你想在Dojo中创建它,请参阅我的jsFiddle:

如果你想添加其他输入

,我在html中添加了一些data-attribute以使其全局化

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