Pokaż-Ukryj divy używając jquery w rozwijanej liście z twistem - jquery, html, menu rozwijane, show-hide

Chcę pokazać / ukryć elementy w zależności od tego, co jestwybrano w rozwijanym menu, mam go, ale chcę, aby div wyświetlał się, gdy wybrano DIVAREA2 lub DIVAREA3. Powiedzmy, że chcę, aby obszar DIV 4 był wyświetlany w obszarze DiV 2 i obszarze DIV 3

Dostarczyłem skrzypce z jakimś kodem, który znalazłem blisko tego, co chcę zrobić. Oto jsfiddle:

http://jsfiddle.net/Ayeblinken/guDsm/1/

HTML

<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>
<div id="divarea4" class="box">DIV Area 4</div>

JavaScript

$(document).ready(function() {
$(".box").hide();
$("#dropdown").change(function() {
$(".box").hide();
$("#div" + $(this).val().show();
});
});

Odpowiedzi:

3 dla odpowiedzi № 1

Jeśli chcesz więcej niż jednego pokazanego, użyj klasy takiej jak poniżej:

<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 class="box area1">DIV Area 1</div>
<div class="box area1">DIV Area 2</div>
<div class="box area2">DIV Area 3</div>
<div class="box area2">DIV Area 4</div>

JS

$(document).ready(function(){
$(".box").hide();
$("#dropdown").change(function() {
$(".box").hide();
$("." + $(this).val()).show();
});
});

Oto JSFIDDLE: http://jsfiddle.net/mac1175/yEJL2/

EDYTOWAĆ

Aby domyślnie wybrać obszar 1, dodaj selected atrybut opcji dla obszaru 1. Dodaj połączenie łańcuchowe wyzwalacza do procedury obsługi zdarzenia zmiany, takiej jak ...

JS

$(document).ready(function(){
$(".box").hide();
$("#dropdown").change(function() {
$(".box").hide();
$("." + $(this).val()).show();
}).trigger("change");
});

JSFIDDLE: http://jsfiddle.net/mac1175/FKf9p/

---

0 dla odpowiedzi nr 2

Co powiesz na instrukcję if?

$(document).ready(function(){
$(".box").hide();
$("#dropdown").change(function() {
var area = $(this).val();
$(".box").hide();
$("#div" + area).show();
if(area == "area2" || area== "area3") {
$("#divarea4").show();
}
});
});

---