JQuery 使用下拉菜单选择多个 div答案

【问题标题】：JQuery Select Multiple Divs with DropdownJQuery 使用下拉菜单选择多个 div
【发布时间】：2013-05-17 03:47:20
【问题描述】：

长期浏览，第一次发帖。

我想做的是让用户在下拉菜单中选择要显示的周数，然后显示那么多 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 周，则显示第 1 周和第 2 周 div。如果选择了第 3 周，则会显示第 1 周、第 2 周和第 3 周 div。

我一直在努力解决这个问题……我尝试创建一些嵌套的 div，但效果并不理想。我还尝试为多个 div 赋予它们自己的类，然后尝试显示它们。

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

感谢任何帮助！

【问题讨论】：

欢迎来到 SO，正式。 =]

标签： jquery drop-down-menu jquery-selectors

【解决方案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();
    });
});

【讨论】：

【解决方案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

【讨论】：

这也能创造奇迹！我希望我能给出两个正确的答案！也许这更正确，因为它适合更多人的情况..

【解决方案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();
        }
    });
});

【讨论】：

【解决方案4】：

使用级联方法。通过data-* 属性建立父子关系。在每个 div 上，属性中都有其先前的 div id。 data-parentid="2"。然后你可以继续链接你的功能，直到你得到一个没有父ID的div。您可以选择任何方式更改布局，并且这种关系将保持不变。

【讨论】：