What I want to do should be very simple... but somehow just doesn't
work:
I want to control the hiding/showing of paragraphs with a <select>
element.
Without further adue, the code:
$("select.numberPages").change(function(){
if ( $("option.a").selected ) {
$("#p1").show();
$("#p2, #p3, #p4, #p5").hide();
}
if ( $("option.b").selected) {
$("#p1, #p2").show();
$("#p3, #p4, #p5").hide();
}
if ( $("option.c").selected) {
$("#p1, #p2, #p3").show();
$("#p4, #p5").hide();
}
if ( $("option.d").selected) {
$("#p1, #p2, #p3, #p4").show();
$("#p5").hide();
}
if ( $("option.e").selected) {
$("#p1, #p2, #p3, #p4, #p5").show();
}
})
And for the HTML:
<p>A. Number of pages :
<select name="numberPages" class="numberPages">
<option class="a">1</option>
<option class="b">2</option>
<option class="c">3</option>
<option class="d">4</option>
<option class="e">5</option>
</select></p>
<p id="p1">content</p>
<p id="p2">content</p>
<p id="p3">content</p>
<p id="p4">content</p>
<p id="p5">content</p>
I hope someone has the time and kindness to figure this out...
