JQuery Select Multiple Divs with Dropdown

Question

Long time browser, first time poster.

What I'd like to do is have a user select the number of weeks to display in a dropdown menu, and then reveal that many divs. Right now I have it setup where I can reveal one div or all, but I'd like to do it for the previous divs.

Right now I have:

<SELECT name="number_of_weeks" id="number_of_weeks">
<OPTION value = "week1">1</OPTION>
<OPTION value = "week2">2</OPTION>
<OPTION value = "week3">3</OPTION>
</SELECT>

<div id = "week1" class = "weekmenu">
Week 1 </br>
</div>
<div id = "week2" class = "weekmenu">
Week 2 </br>
</div>
<div id = "week3" class = "weekmenu">
Week 3 </br>
</div>

And for the javascript:

$(document).ready(function () {
        $('.weekmenu').hide();
        $('#week1').show();
        $('#number_of_weeks').change(function () {
            $('.weekmenu').hide();
            $('#'+$(this).val()).show();
        });
    });

The output should be something like this: If week1 is selected only the week1 div is shown. If week 2 is selected, both the week1 and week2 divs are shown. If week 3 is selected the week1, week2, and week3 divs are shown.

I've been banging my head over this...I tried creating some nested divs but it didn't work out quite right. I also tried to give multiple divs their own classes, and then try to show those.

JSFiddle: http://jsfiddle.net/meRcr/21/

Any help is appreciated!

Welcome to SO, officially. =]

Yatrix
– Yatrix

2013-05-17 03:56:48 +00:00
Commented May 17, 2013 at 3:56 — Yatrix
– Yatrix, Commented May 17, 2013 at 3:56

j08691 · Accepted Answer · 2013-05-17 03:52:11Z

2

Just change the last line of jQuery to:

  $('#' + $(this).val()).prevUntil('select').addBack().show();

jsFiddle example

Full code:

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();
        $('#' + $(this).val()).prevUntil('select').addBack().show();
    });
});

answered May 17, 2013 at 3:52

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PSL · Accepted Answer · 2013-05-17 03:54:50Z

2

Try this:-

$('#' + $(this).val()).prevAll('.weekmenu').andSelf().show(); is the key.

.prevAll() will get you all the preceding siblings matching the selector .weekmenu and then include itself too using andSelf() to the collection.

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();
        $('#' + $(this).val()).prevAll('.weekmenu').andSelf().show();
    });
});

Fiddle

answered May 17, 2013 at 3:54

PSL

124k21 gold badges257 silver badges243 bronze badges

1 Comment

RobDubya Over a year ago

This also works wonders! I wish I could give two right answers! Maybe this is more correct because it would fit more folk's situations..

Niek Nijland · Accepted Answer · 2013-05-17 03:52:26Z

0

Try something like this, I didn't test it but I think it works:)

$(document).ready(function () {
    $('.weekmenu').hide();
    $('#week1').show();
    $('#number_of_weeks').change(function () {
        $('.weekmenu').hide();

        var weekNumbers = $(this).val();
        for(var i = 1; i<= weekNumbers; i++) {
            $('#week' + i).show();
        }
    });
});

answered May 17, 2013 at 3:52

Niek Nijland

7721 gold badge7 silver badges21 bronze badges

Comments

Yatrix · Accepted Answer · 2013-05-17 03:56:11Z

0

Use a cascading approach. Have a child-parent relationship through data-* attributes. On each div, have its previous divs id in the attribute. data-parentid="2". Then you can just keep chaining your functionality until you get to a div with no parentid. You can change your layout anyway you choose and this relationship will be intact.

answered May 17, 2013 at 3:56

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

Collectives™ on Stack Overflow

JQuery Select Multiple Divs with Dropdown

4 Answers 4

Comments

Fiddle

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related