How about something more succinct?
$("select.numberPages").change(function(){
$('p:not(.skip)').show().filter(':gt('+(parseInt($(this).val
())-1)+')').hide();
});
It requires a class on the p containing the select is all:
<p class="skip">A. Number of pages : ...
Or if there will be other p's on the page that are siblings, put a
class on the p's to show/hide:
<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 class="tog">content</p>
<p class="tog">content</p>
<p class="tog">content</p>
<p class="tog">content</p>
<p class="tog">content</p>
$("select.numberPages").change(function(){
$('p.tog').show().filter(':gt('+(parseInt($(this).val())-1)+')').hide
();
});
On Mar 12, 6:49 pm, James <james.gp....@gmail.com> wrote:
> Try changing it up a little:
>
> <select name="numberPages" class="numberPages">
> <option value="a">1</option>
> <option value="b">2</option>
> ....
> </select></p>
>
> And instead of:
> if ( $("option.a").selected ) {
>
> Use
> if ($(this).val() == 'a') {
>
> On Mar 12, 1:33 pm, Faucon4Kenny <faucon4ke...@gmail.com> wrote:
>
> > 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...
