Показать / скрыть несколько DIV с помощью Выбрать с помощью jQuery
По сути, у меня та же ситуация, что и у человека в следующем вопросе:
Ссылка:Как показать / скрыть Div с помощью выбора. (JQuery)
Благодаря обширному поиску в Google я смог придумать несколько разных методов, в которых люди утверждают, что их метод работает. Я пока не заставлю их работать правильно. Я пока не знаю достаточно о jQuery, чтобы полностью понять, как написать это с нуля, поэтому пока я полагаюсь на действительно хорошие примеры.
То, с чем я пытался работать (основываясь на примерах, которые я нашел и попробовал), это:
<script type="text/javascript">
(document).ready(function() {
('.box').hide();<br/>
('#dropdown').change(function() {
('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
});
});
</script>
<form>
<select id="dropdown" name="dropdown">
<option value="0">Choose</option>
<option value="area1">DIV Area 1</option>
<option value="area2">DIV Area 2</option>
<option value="area3">DIV Area 3</option>
</select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>
Примечание. Для правильного отображения в этом сообщении я использую скобки, а не знаки «меньше» и «больше», чем в HTML.Что я получу, когда я проверю это:
При первой загрузке ничего не выбрано => DIV не отображается.Когда я выбираю DIV Area 1 => DIV Area 2 и 3 отображаются.Когда я выбираю DIV Area 2 => DIV Area 1 и 3 отображаются.Когда я выбираю DIV Area 3 => DIV Area 1 и 2 отображаются.Мой мозг жарен на день. Что я могу сделать, чтобы это исправить?