ASP.NET MVC Multiple selection listbox values not rendering

Question

I have 2 single select drop-downs and 1 multi-select list-box. following is the code in html.I have first selected the value from first drop-down(single select). according to its value second drop-down values were loaded.Then I selected a value from 2nd drop-down.Ideal scenario is according to 2nd drop-down value 3rd multi-select list-box should be loaded with value.I have encountered a strange behavior. Even though in HTML select is showing option values, But when rendering it shows No Results.

 <div class="row sub-container">
            <div class="sub-heading">Filter supplier / service provider by categories</div>

            <div class="form-group clearfix">
                <label class="form-label col-md-3">Services Categories Level 1</label>
                <div class="col-md-9">
                    <section id="section-examples" class="attireBlock mod1">
                        <div class="">
                            <div class="">
                                @Html.DropDownList("addServiceServiceCategoryLevel1", Model.ServiceCategoryList, "Please select a Category", new { @class = "form-control" })
                            </div>
                            
                        </div>
                    </section>
                </div>
            </div>

            <div class="form-group clearfix">
                <label class="form-label col-md-3">Services Category Level2</label>
                <div class="col-md-9">
                    <section id="section-examples" class="attireBlock mod1">
                        <div class="">
                            @Html.DropDownList("addServiceServiceCategoryLevel2", new SelectList(string.Empty, "Id", "Name"), "Please select a Category", new { @class = "form-control" })
                        </div>
                    </section>
                </div>
            </div>

            <div class="form-group clearfix">
                <label class="form-label col-md-3">Services Category</label>
                <div class="col-md-9">
                    <section id="section-examples" class="attireBlock mod1">
                        
                        <div class="fstElement fstMultipleMode fstNoneSelected">
                          

                            @Html.ListBox("addServiceServiceCategory",new SelectList(string.Empty, "Id", "Name"), new { @class = "multipleSelect", @multiple = "" })
                        </div>
                    </section>
                </div>
            </div>

 $(document).ready(function () {

               $('.multipleSelect').fastselect();


  $("#addServiceServiceCategoryLevel2").on("change", function () {  // whenever a selection is made
        $("#addServiceServiceCategory").empty();

        var id = $("#addServiceServiceCategoryLevel2").val();

        $.ajax({
            type: 'POST', // we are calling json method
            url: "/ServiceProviders/GetServiceCategoryLevel2",
            dataType: 'json',
            data: { id },
            success: function (states) {

                $.each(states, function (i, state) {
                    $("#addServiceServiceCategory").append('<option value="' + state.Value + '">' +
                        state.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Failed to retrieve states.' + ex);
            }
        });
        return false;
    });

});

Answer 1

I think your problem is because you are updating your options after you initialize as fastselect

hence it did not pick up the new change

try re initialize once ajax success load data

so something like:

$.ajax({
    type: 'POST', // we are calling json method
    url: "/ServiceProviders/GetServiceCategoryLevel2",
    dataType: 'json',
    data: { id },
    success: function (states) {

        $.each(states, function (i, state) {
            $("#addServiceServiceCategory").append('<option value="' + state.Value + '">' +
                state.Text + '</option>');
        });

        // re initalize fastselect`
        $('.multipleSelect').fastselect();
    },
    error: function (ex) {
        alert('Failed to retrieve states.' + ex);
    }
});