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

1.在分部视图中&＃xff1a;

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


2.Index视图里对这个下拉的前段方法&＃xff08;多选&＃xff0c;全选的实现&＃xff09;

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

function showAddModal() {$(&＃39;#add&＃39;).modal(&＃39;show&＃39;);/// add multiselect$("#add #下拉多选项名字").multiselect({buttonWidth: &＃39;100%&＃39;,enableFiltering: true,includeSelectAllOption: true,onChange: function (option, checked, select) {var addlistModel &＃61; $("#add #下拉多选项名字").val();if (addlistModel &＃61;&＃61; null) {$("#add #多选项名字").val("");}else {$("#add #多选项名字").val("");var str &＃61; "";for (var i &＃61; 0; i < addlistModel.length; i&＃43;&＃43;) {str &＃43;&＃61; addlistModel[i] &＃43; ",";}str &＃61; str.substring(0, str.length - 1);$("#add #多选项名字").val(str);}},onSelectAll: function () {var addlistModel &＃61; $("#add #下拉多选项名字").val();$("#add #多选项名字").val("");var str &＃61; "";for (var i &＃61; 0; i < addlistModel.length; i&＃43;&＃43;) {str &＃43;&＃61; addlistModel[i] &＃43; ",";}str &＃61; str.substring(0, str.length - 1);$("#add #多选项名字").val(str);},onDeselectAll: function () {$("#add #多选项名字").val("");}});$(&＃39;#add&＃39;).draggable({ scroll: false });}


在Modify中实现多选&＃xff0c;也是在function showModifyModal()这个函数方法中:$("#modify #修改下拉的多选名").multiselect({buttonWidth: &＃39;100%&＃39;,enableFiltering: true,includeSelectAllOption: true,onChange: function (option, checked, select) {var OneModel &＃61; $("#modify #修改下拉的多选名").val();if (OneModel &＃61;&＃61; null) {$(&＃39;#modify #修改下拉的多选名&＃39;).multiselect(&＃39;select&＃39;, null);}$("#modify #多选项名字").val("");var str &＃61; "";for (var i &＃61; 0; i < OneModel .length; i&＃43;&＃43;) {str &＃43;&＃61; OneModel [i] &＃43; ",";}str &＃61; str.substring(0, str.length - 1);$("#modify #多选项名字").val(str);},onSelectAll: function () {var modlistModel &＃61; $("#modify #修改下拉的多选名").val();$("#modify #多选项名字").val("");var str &＃61; "";for (var i &＃61; 0; i < modlistModel.length; i&＃43;&＃43;) {str &＃43;&＃61; modlistModel[i] &＃43; ",";}str &＃61; str.substring(0, str.length - 1);$("#modify #多选项名字").val(str);},onDeselectAll: function () {$("#modify #多选项名字").val("");}});

3.实现效果
会自动出现一个’Seleta all’的选项