如何在 MVC 中实现 MultiSelect 下拉列表答案

【问题标题】：How to implement MultiSelect dropdown list in MVC如何在 MVC 中实现 MultiSelect 下拉列表
【发布时间】：2018-05-04 12:08:52
【问题描述】：

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

我正在使用这个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（更新）：-

  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。

【问题讨论】：

如果你想要多选，首先它需要是ListBoxFor() 而不是DropDownListFor()（如果还没有StateIds 属性需要是IEnumerable<T>）
"国家完全扭曲，如图 2 所示"您可能忘记引用插件 css 文件。
我将它用作 public Nullable StateIds { get;放; }
您不能将 <select multiple> 绑定到 int? 属性 - 它必须是 IEnumerable<int>
我不熟悉那个插件（你刚刚展示了一个没有帮助的 js 代码链接——你应该链接到实际站点）。但是您多次初始化插件 - 在第一次加载时，然后在您选择第一个选项时再次。那将是错误的（除非您破坏了以前的实例）。像大多数类似的插件一样，我假设您可以调用一个方法来更新选项。

标签： javascript jquery asp.net-mvc jquery-plugins jquery-ui-multiselect

【解决方案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();
                }
            });
        }

【讨论】：