paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Jquery - show DIV per option select

In questo semplice esempio, vi illustro come visualizzare un div a seconda di una opzione scelta in un elemento "select". Il codice è molto semplice, ma puo' risultare un buon punto di partenza per approfondire il linguaggio Jquery.
Non mi soffermo in particolari descrizioni, se non farvi notare l'uso del metodo siblings che permette di ricercare un elemento in un elenco di elementi ad albero. Qui trovate la descrizione ufficiale.
Questo l'esempio completo da copiare ed incollare, ricordando di indicare il path completo del file jquery-X.X.X.js

<script type="text/javascript" src="path/to/jquery-X.X.X.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$('#box1').hide();
	$('#box2').hide();
	$('#box3').hide();

	$("#thechoices").change(function(){
		if(this.value == 'all')	{
			$("#boxes").children().show();
		}else{
			$("#" + this.value).show().siblings().hide();
		}
	});

	$("#thechoices").change();
});

</script>
<body>
<select id="thechoices">
	<option value="box1">Box 1</option>
	<option value="box2">Box 2</option>
	<option value="box3">Box 3</option>
	<option value="all">All Boxes</option> 
</select>

<!-- the DIVs -->
<div id="boxes">
	<div id="box1"><p>Box 1 stuff...</p></div>
	<div id="box2"><p>Box 2 stuff...</p></div>
	<div id="box3"><p>Box 3 stuff...</p></div>
</div>
</body>