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

Posted 2023-05-09

【中文标题】如何在 MVC 中实现 MultiSelect 下拉列表

【英文标题】：How to implement MultiSelect dropdown list in MVC

【发布时间】：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 代码链接——你应该链接到实际站点）。但是您多次初始化插件 - 在第一次加载时，然后在您选择第一个选项时再次。那将是错误的（除非您破坏了以前的实例）。像大多数类似的插件一样，我假设您可以调用一个方法来更新选项。

【参考方案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();
                
            );