JQuery 使用下拉菜单选择多个 Div

Question

长时间浏览，第一次发帖。

我想做的是让用户选择要在下拉菜单中显示的周数，然后显示那么多的 div。现在我已经设置好了可以显示一个或全部 div，但我想对之前的 div 进行此操作。

现在我有:

<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>

对于 JavaScript:

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

输出应如下所示:如果选择 week1，则仅显示 week1 div。如果选择第 2 周，则将显示 week1 和 week2 div。如果选择第 3 周，则会显示 week1、week2 和 week3 div。

我一直在思考这个问题...我尝试创建一些嵌套的 div，但结果不太正确。我还尝试为多个 div 提供自己的类，然后尝试显示这些类。

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

感谢任何帮助!

Answer 1

只需将 jQuery 的最后一行更改为:

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

<强> jsFiddle example

完整代码:

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