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

Question

I am having 4 dropdown list inside 4 div's and I want to hide and show this div's on dropdown selection from top to botton. If user changes the option in first dropdown then the immediate next div should be shown and the div's following this next div's should fadeOut(). [situation- Every next Dropdown is filled with options depending on the option selected in parent Dropdown List dynamically] Now I need the Jquery code as short as possible, hence I tried this.... How to select all div element after some specific number of div elements? and made some changes according to my situation.Here is the code....

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

But fadeOut() is not working. Can anyone help me on this ?

Thanx in advance

Answer 1

You can simplify this quite a bit if you use operations relative to the changed select.

• You need to initially hide all but the first selector.
• When a select changes, see if the val() is the empty string.
• If a selection is made fade in the next div only (using closest('div').next() )
• If it is blank, fadeout out all subsequent divs using nextAll()

eg

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