在这些 div 中的 select 框中动态加载选项后如何 show/hide div 元素？

Question

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

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

如果您使用相对于已更改的 select 的操作，您可以大大简化此操作。

除第一个 select 或
当select变化时，查看val()是否为空串。
如果 selection 在下一个 div 中淡出（使用 closest('div').next()）
如果它是空白的，使用nextAll()

例如

 $(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 中的 select 框中动态加载选项后如何 show/hide div 元素？

How to show/hide div element after dynamically loading options in select box inside these div's?

html

javascript

css

jquery

fadeout