How to implement MultiSelect dropdown list in MVC

Question

I am working on a web page where I need to create and fill a multiselect dropdown for states based on selected country.

I am using this plugin.

Html :-

 @Html.DropDownListFor(m => m.CountryId, Model._CountryList, new { @class = "form-control countries", @tabindex = "12", @id = "ddlCorrCountry" })
 @Html.DropDownListFor(m => m.StateIds, Model._StateList, new { @class = "form-control ms-parent multiselectmulticolumnddlstate nopadd states", @tabindex = "13", @id = "ddlCorrState" })

jQuery (Update):-

  function makeMultiSelect() {
        $('select.multiselectmulticolumnddlstate').multipleSelect({
            multipleWidth: 190,
            width: '100%',
            filter: true,
            multiple: true,
            position: 'bottom',
            animate: 'none', // 'none', 'fade', 'slide'
            placeholder: '-- Select --',                
            selectAllText: 'Select All',
            allSelected: 'All Selected',
            countSelected: '# of % selected',
            noMatchesFound: 'No matches found',
            onClick: function () {                    
            },
            onOptgroupClick: function () {                   
            },
            onUncheckAll: function () {                   
            },
            onClose: function () {                   
            }
        });
    }

    $(document).ready(function () {
        makeMultiSelect();
        $('body').on('change', '#ddlCorrCountry', function () {
            GetAllStates();
        });

        function GetAllStates() {
            try {
                $('#ddlCorrState').empty();
                var params = { "SId": $('#ddlCorrCountry').val(), "All": false }
                $.ajax({
                    type: "POST",
                    url: "/utility/getstates",
                    data: JSON.stringify(params),
                    async: false,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        debugger;
                        $.each(data, function () {
                            $('#ddlCorrState').append("<option value=" + this.Value + ">" + this.Text + "</option>");
                        });
                        makeMultiSelect();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert(jqXHR.responseText + ' Error:' + errorThrown);
                    }
                });
            }
            catch (ex)
            { alert('EX:' + ex.message); }
        }
    });

On page load I am getting below first image which is correct, but while changing/selecting any country its totally distorts as shown in image 2 and even state dropdown is not opening by clicking on it.

Note here I am calling a partial view in modal popup, TIA.

Answer 1

Just need to call plugin function again after rebinding the dropdown.

 function makeMultiSelect() {
        $('select.multiselectmulticolumnddlstate').multipleSelect({
            multipleWidth: 190,
            width: '100%',
            filter: true,
            multiple: true,
            position: 'bottom',
            animate: 'none', // 'none', 'fade', 'slide'
            placeholder: '-- Select --',
            //addTitle: 'Sunil',
            //delimiter: ', ',
            //minimumCountSelected: 3,
            selectAllText: 'Select All',
            allSelected: 'All Selected',
            countSelected: '# of % selected',
            noMatchesFound: 'No matches found',
            onClick: function () {
                //$("#<%= hdnfld.ClientID %>").val("1");
            },
            onOptgroupClick: function () {
                //$("#<%= hdnfld.ClientID %>").val("1");
            },
            onUncheckAll: function () {
                //$("#<%= hdnfld.ClientID %>").val("1");
                //unSelectAll();
            },
            onClose: function () {
                //var hdnVal = $("#<%= hdnfld.ClientID %>").val();
                //if (hdnVal == "1") {
                //    $('#cover').show();
                //    $(".myhdnBtn").click();
                //}
            }
        });
    }

    $(document).ready(function () {
        makeMultiSelect();
        $('body').on('change', '#ddlCorrCountry', function () {
            GetAllStates();
        });

        function GetAllStates() {
            debugger;
            $('#ddlCorrState').find('option').remove(); $('#ddlCorrState').empty();
            $.ajax({
                type: "post", url: "/city/getstates", data: { CountryId: $('#ddlCorrCountry').val(), IsAll: true }, datatype: "json", traditional: true, success: function (data)
                {
                    $.each(data, function (index, value) {
                        $('#ddlCorrState').append('<option value="' + value.Value + '">' + value.Text + '</option>');
                    });
                    makeMultiSelect();
                }
            });
        }