/ / Show-Hide divs using jquery in a dropdown with a twist - jquery, html, drop-down-menu, show-hide

Zobraziť skryť divs pomocou jquery v rozbaľovacom zozname s twist - jquery, html, drop-down-menu, show-hide

Chcem zobraziť / skryť prvky podľa toho, čo jevybraté v rozbaľovacej ponuke, mám to, ale chcem, aby sa divs zobrazovali, keď je vybratá buď DIVAREA2 alebo DIVAREA3. Povedzme, že chcem, aby sa oblasť DIV 4 zobrazovala v oblasti DiV 2 a oblasti DIV 3

Dodal som husle s nejakým kódom odtiaľto a zistil som, že je blízko tomu, čo chcem robiť. Tu je 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();
});
});

odpovede:

3 pre odpoveď č. 1

Ak chcete zobraziť viac ako jeden, použite nasledujúcu triedu:

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

Tu je JSFIDDLE: http://jsfiddle.net/mac1175/yEJL2/

UPRAVIŤ

Ak chcete predvolene vybrať oblasť1, pridajte znak selected atribút vašej možnosti pre oblasť 1. Pridajte zreťazené spúšťacie volanie do svojej obslužnej rutiny udalosti zmeny, ako ...

JS

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

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


0 pre odpoveď č. 2

Čo tak vyhlásenie 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();
}
});
});