2016-04-29 3 views
3

По умолчанию, должно быть выбрано государство и должно отображаться раскрывающееся меню. Если вы выберете переключатель «Регион», появится раскрывающийся список «Регион». Ниже указаны надбавки. Как использовать додзё для этого?Как использовать dojo, чтобы показать/скрыть DIV, нажав переключатель?

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

+0

Почему бы не использовать простые js здесь? –

+0

Мы стараемся избегать родных JS и других библиотек и строго использовать Dojo, с которыми у меня никогда не было опыта. –

ответ

1

Простой JS скрипт достаточно, но если вы хотите, чтобы сделал это в додзё, см мой jsFiddle:

Я имею добавить данные-атрибут в HTML, чтобы сделать его глобальной, если вы хотите добавить другие входы

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

Спасибо! Ваши коды работали. –

+0

Добро пожаловать @AlexW. :) –