Question

我在4个div中有4个下拉列表，我想隐藏并显示从div到botton的下拉选项中的div。如果用户在第一个下拉列表中更改了该选项，则应显示下一个div，并且下一个div后面的div应该是fadeOut（）。 [情况 - 每个下一个下拉列表都填充了选项，具体取决于父下拉列表中选择的选项动态] 现在我需要尽可能短的Jquery代码，因此我尝试了这个.... How to select all div element after some specific number of div elements? 并根据我的情况做了一些改变。这是代码....

HTML：

<div class="wrapper-inner">
    <div class="OrganisationWrapper onChangeHideWrapper" id="OrganisationWrapper" data-title="1">
        @*data-title is used as index for show/hide on Ddl change*@
        @Html.DropDownListFor(model => model.OrgId, new SelectList(Model.Organisations, "Key", "Value"), "Select Organization..!", new { id = "Organisation", @class = "selectpicker", data_style = " btn-info", data_live_search = "true" })
    </div>
    <div class="SpaceWrapper onChangeHideWrapper" id="SpaceWrapper" data-title="2">
        @Html.DropDownListFor(model => model.SpaceId, new SelectList(string.Empty, "Value", "Text"), "Loading Space..!", new { id = "Space", @class = "selectpicker", data_style = " btn-info", data_live_search = "true" })
   </div>
......
</div>

JQuery的：

$("#Organisation").change(function () {
    if ($(this).length > 0) {
        index = $(this).parent(".onChangeHideWrapper").attr("data-title");
        $('.wrapper - inner .onChangeHideWrapper:gt(' + index + ')').fadeOut();
    }
    else{
        $('.onChangeHideWrapper').fadeOut();
    }      
}
$("#Space").change(function () {
    if ($(this).length > 0) {
        index = $(this).parent(".onChangeHideWrapper").attr("data-title");
        $('.wrapper - inner .onChangeHideWrapper:gt(' + index + ')').fadeOut();
    }
    else{
        $('.onChangeHideWrapper').fadeOut();
    }
}

但是fadeOut（）无效。任何人都可以帮我吗？

提前完成

Answer 1

如果您使用相对于更改的选择的操作，则可以相当简化。

您需要先隐藏除第一个选择器以外的所有选择器。
当选择更改时，查看val()是否为空字符串。
如果选择仅在下一个div中淡出（使用closest('div').next()）
如果为空，请使用nextAll()

e.g。

 $(document).ready(function () {
    $('.onChangeHideWrapper:gt(0)').hide();
    $('.selectpicker').change(function () {
        if ($(this).val() != "") {
            $(this).closest('.onChangeHideWrapper').next().fadeIn();
        } else {
            $(this).closest('.onChangeHideWrapper').nextAll().fadeOut();
        }
    });
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/bar95jzq/8/

如何在这些div中的选择框中动态加载选项后显示/隐藏div元素？

1 个答案: