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

【问题标题】：How to show/hide div element after dynamically loading options in select box inside these div's?如何在这些 div 内的选择框中动态加载选项后显示/隐藏 div 元素？
【发布时间】：2015-01-24 03:04:55
【问题描述】：

我在 4 个 div 中有 4 个下拉列表，我想在从顶部到底部的下拉选择中隐藏和显示此 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() 不起作用。谁能帮我解决这个问题？

提前感谢

【问题讨论】：

你为什么不创建一个 Fiddle，它会容易得多。
$(this).length 是这些单击/更改处理程序中的 jQuery 对象/数组长度，因此将始终为 1！
如果您提供输出 HTML（从浏览器中保存）并可能将其全部放在 JSFiddle 中，这将有助于提供正确的示例。从代码中不清楚（已损坏 - 请参阅前面的评论）预期的行为是什么，所以也请澄清一下。
您的选择器也遇到了错误的剪切/粘贴格式：.wrapper - inner = .wrapper-inner?
@skobaljic 无法创建小提琴，因为它包含 C# 代码，我不知道如何让它在小提琴中工作。一些数据是使用 Api 动态传递的

标签： javascript jquery html css fadeout

【解决方案1】：

如果您使用与更改后的选择相关的操作，则可以大大简化此操作。

您最初需要隐藏除第一个选择器之外的所有选择器。
When a select changes, see if the val() is the empty string.
如果选择仅在下一个 div 中淡入淡出（使用 closest('div').next()）
如果为空，则使用nextAll()淡出所有后续的div

例如

 $(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/

【讨论】：