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

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

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

Answer 4

使用级联方法。通过data-*属性建立子父关系。在每个div上，在属性中包含其先前的div id。 data-parentid="2"。然后你可以继续链接你的功能，直到你得到没有parentid的div。您可以随意改变您的布局，这种关系将完好无损。

JQuery选择具有下拉列表的多个Div

4 个答案:

Fiddle