C# MVC 实现下拉框多选，一键全选，下拉栏搜索选项功能

最新推荐文章于 2024-05-10 15:31:30 发布

Vincy.Zhang

最新推荐文章于 2024-05-10 15:31:30 发布

阅读量2.4k

点赞数

分类专栏： ASP.NET MVC C# JavaScript 文章标签： c# javascript 前端

本文链接：https://blog.csdn.net/weixin_43041350/article/details/125669057

版权

ASP.NET MVC 同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

26 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 1 订阅

订阅专栏

1.在分部视图中：

        <div class="form-group">
            @Html.LabelFor(m => m.多选项名字, new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
                @Html.DropDownList("下拉多选项名字", ViewBag.多选列表 as List<SelectListItem>, new { @class = "form-control", @multiple = "multiple" })
                @Html.HiddenFor(m => m.多选项名字)
            </div>
        </div>

2.Index视图里对这个下拉的前段方法（多选，全选的实现）

在show这个分部视图的方法函数中，js写多选的效果

        function showAddModal() {

            $('#add').modal('show');



            /// add  multiselect
            $("#add #下拉多选项名字").multiselect({
                buttonWidth: '100%',
                enableFiltering: true,
                includeSelectAllOption: true,
                onChange: function (option, checked, select) {
                    var addlistModel = $("#add #下拉多选项名字").val();
                    if (addlistModel == null) {
                        $("#add #多选项名字").val("");
                    }
                    else {
                        $("#add #多选项名字").val("");
                        var str = "";
                        for (var i = 0; i < addlistModel.length; i++) {
                            str += addlistModel[i] + ",";
                        }
                        str = str.substring(0, str.length - 1);

                        $("#add #多选项名字").val(str);
                    }
                },
                onSelectAll: function () {
                    var addlistModel = $("#add #下拉多选项名字").val();
                    $("#add #多选项名字").val("");
                    var str = "";
                    for (var i = 0; i < addlistModel.length; i++) {
                        str += addlistModel[i] + ",";
                    }
                    str = str.substring(0, str.length - 1);
                    $("#add #多选项名字").val(str);
                },
                onDeselectAll: function () {
                    $("#add #多选项名字").val("");
                }
            });
            $('#add').draggable({ scroll: false });

        }

在Modify中实现多选，也是在function showModifyModal()这个函数方法中:

            $("#modify #修改下拉的多选名").multiselect({
                buttonWidth: '100%',
                enableFiltering: true,
                includeSelectAllOption: true,
                onChange: function (option, checked, select) {
                    var OneModel = $("#modify #修改下拉的多选名").val();
                    if (OneModel == null) {
                        $('#modify #修改下拉的多选名').multiselect('select', null);
                    }
                    $("#modify #多选项名字").val("");
                    var str = "";
                    for (var i = 0; i < OneModel .length; i++) {
                        str += OneModel [i] + ",";
                    }
                    str = str.substring(0, str.length - 1);
                    $("#modify #多选项名字").val(str);
                },
                onSelectAll: function () {
                    var modlistModel = $("#modify #修改下拉的多选名").val();
                    $("#modify #多选项名字").val("");
                    var str = "";
                    for (var i = 0; i < modlistModel.length; i++) {
                        str += modlistModel[i] + ",";
                    }
                    str = str.substring(0, str.length - 1);
                    $("#modify #多选项名字").val(str);
                },
                onDeselectAll: function () {
                    $("#modify #多选项名字").val("");
                }
            });