javascript - 如何在 MVC 中实现 MultiSelect 下拉列表

Question

我正在处理一个网页，在该网页上，我需要根据所选国家/地区为州创建和填充多选下拉列表。

我正在使用这个插件。

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（更新）：-

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

在页面加载时，我在第一张图片下方是正确的，但是在更改/选择任何国家/地区时，它会完全扭曲，如图 2 所示，甚至状态下拉菜单也无法通过单击打开。

注意这里我在模态弹出窗口中调用局部视图，TIA。

Answer 1

只需在重新绑定下拉列表后再次调用插件函数。

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