html 多选 select option 插件 multiselect 使用

最新推荐文章于 2024-09-10 13:54:44 发布

angx

最新推荐文章于 2024-09-10 13:54:44 发布

阅读量5.6k

点赞数 1

分类专栏： html&js&css&flash

本文链接：https://blog.csdn.net/meandmyself/article/details/46468123

版权

html&js&css&flash 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、multiselect 是一个开源插件，官网地址https://github.com/ehynds/jquery-ui-multiselect-widget，相关文档地址http://www.erichynds.com/blog/jquery-ui-multiselect-widget（打不开），看了下代码的提交时间，2年到5年前提交的，最近无更新。项目中有用到下拉选择框多选的情况，就研究了下使用方法，detail is below:

二、首先下载https://github.com/ehynds/jquery-ui-multiselect-widget/archive/master.zip 解决后放到项目里，主要引用到的js和css有：

下载下来的压缩包里提借的示例引用的 jquery-ui是google的公共库，国内调不了，所以打开很慢直到超时，自己另外下个jquery-ui改成引用本地的。

用法很简单：

$("#RECEIVE_GOODS").multiselect(
   {

   close: function(){//获取选中的值，在下拉框关闭时触发的
       var value = $("#RECEIVE_GOODS").multiselect("getChecked").map(function(){
                return this.value;
                }).get();
       $("#RECEIVE_GOODS").val(value);
       },
       open: function(){//打开选中初始化，不是很完美，是在点下后处理的，不能在初始化是显示选中的条数
           var vv = document.getElementById("RECEIVE_GOODS").attributes[0].nodeValue;//$("#RECEIVE_GOODS").val();
           var chks = $("#RECEIVE_GOODS").multiselect("getChecks");
           if(null != chks && undefined != chks && chks.length > 0){
               for(var i = 0; i < chks.length; i++){
                   var ck = chks[i];
                   if(null != vv &&　undefined != vv && "" != vv){
                       var vvs = vv.split(",");
                       for(var j = 0; j < vvs.length; j++){
                           if($.trim(ck.value) == $.trim(vvs[j])){
                               ck.checked = true;
                           }
                       }
                   }
               }
           }

       }

   }

三、其它支持的一些相关事件和回调方法

Parameter	Description	Default
showHeader	A boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links.	true
maxHeight	The maximum height in pixels of the scrolling container that holds the checkboxes.	175
minWidth	The minimum width in pixels of widget. Setting to `auto` (default) will inherit the width from the original select element.	200
checkAllText	The default text of the “Check all” link.	Check all
unCheckAllText	The default text of the “Uncheck all” link.	Uncheck all
noneSelectedText	Renamed from `noneSelected` in 0.5! The default text the select box when no options have been selected.	Select options
selectedList	A boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the `selectedText` parameter. A value of 0 or `false` is disabled.	false
selectedText	The text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”. New in 0.5! As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples.	# selected
position	The position of the options menu relative to the input control: top, middle, or bottom.	bottom
shadow	A boolean value denoting whether to apply a css shadow (class ui-multiselect-shadow).	false
fadeSpeed	How fast (in ms) to fade out the options menu on close.	200
state	New in 0.5! The default state of the widget. Either open or closed.	closed
disabled	New in 0.5! Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this.	false
onCheck	A callback to fire when a checkbox is checked.	Function
onOpen	A callback to fire when the options menu is opened.	Function
onCheckAll	A callback to fire when the “Check all” link is clicked.	Function
onUncheckAll	A callback to fire when the “Uncheck all” link is clicked.	Function
onOptgroupToggle	A callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument.