使用下拉菜单选择多个div的JQuery方法

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。如果选择了week2，则同时显示week1和week2 div。如果选择了week3，则显示week1、week2和week3 div。

我已经在努力解决这个问题了......我尝试创建一些嵌套的div，但效果不是很好。我还尝试给多个div分别设置它们自己的类，然后试图展示那些类。

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

非常感谢您的帮助！

- RobDubya

---

欢迎正式加入 SO =] - Yatrix

Answer 1

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

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

jsFiddle示例

完整代码：

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

- j08691

Answer 2

尝试这样做：

$('#' + $(this).val()).prevAll('.weekmenu').andSelf().show(); 是关键。

.prevAll() 将获取所有前面匹配选择器 .weekmenu 的兄弟元素，然后使用 andSelf() 将自身包含在集合中。

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

Fiddle

- PSL

---

这也非常有效！但愿我能给出两个正确的答案！也许这更正确，因为它可以适应更多人的情况。 - RobDubya

Answer 3

尝试像这样做，我没有测试过，但我认为它可以正常工作：)

$(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();
        }
    });
});

- Niek Nijland

Answer 4

采用级联方法。通过data-*属性建立子父关系。在每个div上，将其前面的div的id放入属性中。data-parentid="2"。然后您可以一直链接功能，直到找到没有parentid的div。您可以随意更改布局，这种关系仍然存在。

- Yatrix