下拉选框

如需样例和具体效果，请点击下面的连接。
好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）
附件一:layui应用formselect

layui.config({base: './libs/formSelects/'    //相对路径}).extend({formSelects: 'formSelects-v4'});

附件二:

formSelects-v4.css

/* formSelects澶氶�塩ss */
select[xm-select]{display: none !important;}
.xm-select-parent * {margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, "PingFang SC", 寰蒋闆呴粦, Tahoma, Arial, sans-serif; box-sizing: initial;}
.xm-select-parent {text-align: left;}
.xm-select-parent select {display: none;}
.xm-select-parent .xm-select-title {position: relative;min-height: 36px;}
.xm-select-parent .xm-input {cursor: pointer;border-radius: 2px;border-width: 1px;border-style: solid;border-color: #E6E6E6;display: block;width: 100%;box-sizing: border-box;background-color: #295E9B;height: 36px;line-height: 1.3;padding-left: 10px;outline: 0}
.xm-select-parent .xm-input::-webkit-input-placeholder { color:#CCCCCC; }
.xm-select-parent .xm-input::-moz-placeholder { color:#CCCCCC; } /* firefox 19+ */
.xm-select-parent .xm-input:-ms-input-placeholder { color:#CCCCCC; } /* ie */
.xm-select-parent .xm-input:-moz-placeholder { color:#CCCCCC; }
.xm-select-parent .xm-select-sj {display: inline-block;width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;position: absolute;right: 10px;top: 50%;margin-top: -3px;cursor: pointer;border-width: 6px;border-top-color: #66C0FF;border-top-style: solid;transition: all .3s;-webkit-transition: all .3s}
.xm-select-parent .xm-form-selected .xm-select-sj {margin-top: -9px;transform: rotate(180deg);-webkit-transform: rotate(180deg)}
.xm-select-parent .xm-form-select dl {display: none;position: absolute;left: 0;top: 42px;padding: 5px 0;z-index: 999;min-width: 100%;border: 1px solid #d2d2d2;max-height: 300px;overflow-y: auto;background-color: #fff;border-radius: 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12);box-sizing: border-box;animation-fill-mode: both;-webkit-animation-name: layui-upbit;animation-name: layui-upbit;-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
@-webkit-keyframes layui-upbit {from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}to {-webkit-transform: translate3d(0, 0, 0);opacity: 1}
}
@keyframes layui-upbit {from {transform: translate3d(0, 30px, 0);opacity: .3}to {transform: translate3d(0, 0, 0);opacity: 1}
}
.xm-select-parent .xm-form-selected dl {display: block}
.xm-select-parent .xm-form-select dl dd,.xm-select-parent .xm-form-select dl dt {padding: 0 10px;line-height: 36px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.xm-select-parent .xm-form-select dl dd {cursor: pointer;height: 36px;}
.xm-select-parent .xm-form-select dl dd:hover {background-color: rgba(0, 46, 115, 1)}
.xm-select-parent .xm-form-select dl dt {font-size: 12px;color: #999}
.layui-select-disabled .xm-dis-disabled {border-color: #eee!important}
.xm-select-parent .xm-form-select dl .xm-select-tips {padding-left: 10px!important;color: #999;font-size: 14px}
.xm-unselect {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none}.xm-form-checkbox {position: relative;display: block;vertical-align: middle;cursor: pointer;font-size: 0;-webkit-transition: .1s linear;transition: .1s linear;box-sizing: border-box;height: auto!important;line-height: normal!important;border: none!important;margin-right: 0;padding-right: 0;background: 0 0;}
.xm-form-checkbox > i {color: #FFF; font-size: 16px; width: 16px; height: 16px; position: absolute; top: 9px; border: 1px solid #5FB878; border-radius: 3px; z-index: 2;}
.xm-form-checkbox:hover > i {border-color: #5FB878;}
.xm-form-checkbox > span{display: block;position: relative;padding: 0 15px 0 30px;height: 100%;font-size: 14px;border-radius: 2px 0 0 2px;background-color: #d2d2d2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: 0 0;color: #FFFFFF;line-height: 36px;}.xm-select-parent dl{width: 100%;}
.xm-select-parent dl dd{position: relative;}
.xm-select-parent dl dd > i:not(.icon-sousuo){position: absolute; right: 10px; top: 0; color: #AAAAAA;}
.xm-select-parent dl dd.xm-select-this div > i{color: #009688; font-size: 18px;}
.xm-select-parent dl dd.xm-select-this div > i:after{content: '\e613';}
.xm-select-parent dl dd.xm-dis-disabled div i {border-color: #C2C2C2;}
.xm-select-parent dl dd.xm-dis-disabled.xm-select-this div i {color: #C2C2C2;}
.xm-select-radio div.xm-form-checkbox > i {border-radius: 20px;}
/*.xm-select-parent dl.xm-select-radio dd.xm-select-this div i:after{content: '\e62b';}*/
.xm-select-parent dl.xm-select-radio dd.xm-select-this div i:after{}
.xm-dis-disabled,.xm-dis-disabled:hover {cursor: not-allowed!important}
.xm-form-select dl dd.xm-dis-disabled {background-color: #fff!important}
.xm-form-select dl dd.xm-dis-disabled span {color: #C2C2C2}
.xm-form-select dl dd.xm-dis-disabled .xm-icon-yes {border-color: #C2C2C2}
.xm-select-parent {position: relative;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none}
.xm-select-parent .xm-select {border: 1px solid rgba(102, 192, 255, 0.4);line-height: normal;height: auto;padding: 4px 10px 1px 10px;overflow: hidden;min-height: 36px;left: 0;z-index: 99;position: absolute;background: 0 0;padding-right: 20px}
.xm-select-parent .xm-select:hover {border-color: rgba(102, 192, 255, 0.8)}
.xm-select-parent .xm-select .xm-select-label {display: inline-block;margin: 0;vertical-align: middle}
.xm-select-parent .xm-select-title div.xm-select-label>span {position: relative;padding: 2px 5px;background-color: #295E9B;border-radius: 2px;color: #FFF;display: inline-block;line-height: 18px;height: 18px;margin: 2px 5px 2px 0;cursor: initial;user-select: none;font-size: 14px;padding-right: 25px;-webkit-user-select: none;}
.xm-select-parent .xm-select-title div.xm-select-label>span i {position: absolute; margin-left: 8px; font-size: 12px; cursor: pointer; line-height: 20px;}
.xm-select-parent .xm-select .xm-select-input {height: 28px;background-color: transparent;padding: 0;vertical-align: middle;display: inline-block;width: 50px}
.xm-select-parent .xm-select--suffix input {border: none}
.xm-form-selected .xm-select,.xm-form-selected .xm-select:hover {border-color: rgba(102, 192, 255, 0.8)!important}
.xm-select--suffix+div {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: #295E9B;color: #FFFFFF;border-color: rgba(102, 192, 255, 0.4);z-index: -1;}
.xm-select-dis .xm-select--suffix+div {z-index: 100;cursor: no-drop!important;opacity: .2;background-color: #FFF;}
.xm-select-disabled,.xm-select-disabled:hover {color: #d2d2d2!important;cursor: not-allowed!important;background-color: #fff}
.xm-select-none {display: none;margin: 5px 0;text-align: center;}
.xm-select-none:hover {background-color: #FFF!important}
.xm-select-empty {display: block}
.xm-span-hide {display: none!important;}
.layui-form-pane .xm-select,.layui-form-pane .xm-select:hover {top: 0px;border-radius: 0.25rem;}
.layui-form-pane .xm-select-title {}
.xm-select-hide {display: none !important;}
div[xm-hg] .xm-select-label{white-space: nowrap; overflow: hidden; position: absolute; right: 30px; left: 0; padding-left: 10px;}/* 棰滆壊鐩稿叧 */
div[xm-select-skin] .xm-select-title div.xm-select-label>span {border: 1px solid rgba(102, 192, 255, 0.4)}
div[xm-select-skin] .xm-select-title div.xm-select-label>span i:hover {opacity: .8;filter: alpha(opacity=80);cursor: pointer}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span {background-color: #F0F2F5;color: #909399;border: 1px solid #F0F2F5}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i {color: #C0C4CC}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i:before {content: '\e60b'; font-size: 16px; margin-left: -3px;}
div[xm-select-skin=default] dl dd:not(.xm-dis-disabled) i {border-color: #5FB878}
div[xm-select-skin=default] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #5FB878}
div[xm-select-skin=default].xm-form-selected .xm-select,div[xm-select-skin=default].xm-form-selected .xm-select:hover {border-color: #C0C4CC!important}
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span {background-color: #009688;color: #FFF;border: 1px solid #009688}
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i {background-color: #009688; color: #FFF}
div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i {border-color: #009688}
div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #009688}
div[xm-select-skin=primary].xm-form-selected .xm-select,div[xm-select-skin=primary].xm-form-selected .xm-select:hover {border-color: #009688!important}
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span {background-color: #1E9FFF;color: #FFF;border: 1px solid #1E9FFF}
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i {background-color: #1E9FFF;color: #FFF}
div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i {border-color: #1E9FFF}
div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #1E9FFF}
div[xm-select-skin=normal].xm-form-selected .xm-select,div[xm-select-skin=normal].xm-form-selected .xm-select:hover {border-color: #1E9FFF!important}
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span {background-color: #FFB800;color: #FFF;border: 1px solid #FFB800}
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span i {background-color: #FFB800;color: #FFF}
div[xm-select-skin=warm] dl dd:not(.xm-dis-disabled) i {border-color: #FFB800}
div[xm-select-skin=warm] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FFB800}
div[xm-select-skin=warm].xm-form-selected .xm-select,div[xm-select-skin=warm].xm-form-selected .xm-select:hover {border-color: #FFB800!important}
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span {background-color: #FF5722;color: #FFF;border: 1px solid #FF5722}
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span i {background-color: #FF5722;color: #FFF}
div[xm-select-skin=danger] dl dd:not(.xm-dis-disabled) i {border-color: #FF5722}
div[xm-select-skin=danger] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FF5722}
div[xm-select-skin=danger].xm-form-selected .xm-select,div[xm-select-skin=danger].xm-form-selected .xm-select:hover {border-color: #FF5722!important}/* 澶氶�夎仈鍔�  */
.xm-select-parent .layui-form-danger+.xm-select-title .xm-select {border-color: #FF5722 !important;}
.xm-select-linkage li {padding: 10px 0px;cursor: pointer;}
.xm-select-linkage li span {padding-left: 20px;padding-right: 30px;display: inline-block;height: 20px;overflow: hidden;text-overflow: ellipsis;}
.xm-select-linkage li.xm-select-this span {border-left: 5px solid #009688;color: #009688;padding-left: 15px;}
.xm-select-linkage-group {position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;}
.xm-select-linkage-group li:hover {border-left: 1px solid #009688;}
.xm-select-linkage-group li:hover span {padding-left: 19px;}
.xm-select-linkage-group li.xm-select-this:hover span {padding-left: 15px;border-left-width: 4px;}
.xm-select-linkage-group:nth-child(4n+1){background-color: #EFEFEF; left: 0;}
.xm-select-linkage-group:nth-child(4n+1) li.xm-select-active{background-color: #F5F5F5;}
.xm-select-linkage-group:nth-child(4n+2){background-color: #F5F5F5; left: 100px;}
.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FAFAFA;}
.xm-select-linkage-group:nth-child(4n+3){background-color: #FAFAFA; left: 200px;}
.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FFFFFF;}
.xm-select-linkage-group:nth-child(4n+4){background-color: #FFFFFF; left: 300px;}
.xm-select-linkage-group:nth-child(4n+4) li.xm-select-active{background-color: #EFEFEF;}
.xm-select-linkage li{list-style: none;}
.xm-select-linkage-hide {display: none;}
.xm-select-linkage-show {display: block;}div[xm-select-skin='default'] .xm-select-linkage li.xm-select-this span {border-left-color: #5FB878;color: #5FB878;}
div[xm-select-skin='default'] .xm-select-linkage-group li:hover {border-left-color: #5FB878;}
div[xm-select-skin='primary'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;}
div[xm-select-skin='primary'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;}
div[xm-select-skin='normal'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;}
div[xm-select-skin='normal'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;}
div[xm-select-skin='warm'] .xm-select-linkage li.xm-select-this span {border-left-color: #FFB800;color: #FFB800;}
div[xm-select-skin='warm'] .xm-select-linkage-group li:hover {border-left-color: #FFB800;}
div[xm-select-skin='danger'] .xm-select-linkage li.xm-select-this span {border-left-color: #FF5722;color: #FF5722;}
div[xm-select-skin='danger'] .xm-select-linkage-group li:hover {border-left-color: #FF5722;}/* 蹇嵎鎿嶄綔 */
.xm-select-tips[style]:hover{background-color: #FFF!important;}
.xm-select-parent dd > .xm-cz{position: absolute; top: 0px; right: 10px;}
.xm-select-parent dd > .xm-cz-group{margin-right: 30px; border-right: 2px solid #ddd; height: 16px; margin-top: 10px; line-height: 16px; overflow: hidden;}
.xm-select-parent dd > .xm-cz-group .xm-cz{display: inline-block; margin-right: 30px;}
.xm-select-parent dd > .xm-cz-group .xm-cz i{margin-right: 10px;}
.xm-select-parent dd > .xm-cz-group[show='name'] .xm-cz i{display: none;}
.xm-select-parent dd > .xm-cz-group[show='icon'] .xm-cz span{display: none;}
.xm-select-parent dd .xm-cz:hover{color: #009688;}
div[xm-select-skin='default'] dd .xm-cz:hover{color: #C0C4CC;}
div[xm-select-skin='primary'] dd .xm-cz:hover{color: #009688;}
div[xm-select-skin='normal'] dd .xm-cz:hover{color: #1E9FFF;}
div[xm-select-skin='warm'] dd .xm-cz:hover{color: #FFB800;}
div[xm-select-skin='danger'] dd .xm-cz:hover{color: #FF5722;}/* 涓嬫媺閲岄潰鐨勬悳绱� */
.xm-select-tips .xm-input{border: none; border-bottom: 1px solid #E6E6E6; padding-left: 27px;}
.xm-select-tips .icon-sousuo{position: absolute;}
.xm-select-tips.xm-dl-input{display: none;}
div[xm-select-search-type="1"] .xm-select-tips.xm-dl-input{display: block;}
div[xm-select-search-type="1"] .xm-select .xm-select-input{display: none !important;}/* 闃块噷宸村反鐭㈤噺鍥炬爣搴� */
@font-face {font-family: "xm-iconfont";src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831'); /* IE9*/src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg'); /* iOS 4.1- */
}
.xm-iconfont {font-family:"xm-iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-quanxuan:before { content: "\e62c"; }
.icon-caidan:before { content: "\e610"; }
.icon-fanxuan:before { content: "\e837"; }
.icon-pifu:before { content: "\e668"; }
.icon-qingkong:before { content: "\e63e"; }
.icon-sousuo:before { content: "\e600"; }
.icon-danx:before { content: "\e62b"; }
.icon-duox:before { content: "\e613"; }
.icon-close:before { content: "\e601"; }
.icon-expand:before { content: "\e641"; }

formSelects-v4.js

'use strict';var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) { return typeof obj; } : function(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };function _defineProperty(obj, key, value) { if(key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }/*** name: formSelects* 基于Layui Select多选* version: 4.0.0.0910* http://sun.faysunshine.com/layui/formSelects-v4/dist/formSelects-v4.js*/
(function(layui, window, factory) {if((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {// 支持 CommonJSmodule.exports = factory();} else if(typeof define === 'function' && define.amd) {// 支持 AMDdefine(factory);} else if(window.layui && layui.define) {//layui加载layui.define(['jquery'], function(exports) {exports('formSelects', factory());});} else {window.formSelects = factory();}
})(typeof layui == 'undefined' ? null : layui, window, function() {var v = '4.0.0.0910',NAME = 'xm-select',PNAME = 'xm-select-parent',INPUT = 'xm-select-input',TDIV = 'xm-select--suffix',THIS = 'xm-select-this',LABEL = 'xm-select-label',SEARCH = 'xm-select-search',SEARCH_TYPE = 'xm-select-search-type',SHOW_COUNT = 'xm-select-show-count',CREATE = 'xm-select-create',CREATE_LONG = 'xm-select-create-long',MAX = 'xm-select-max',SKIN = 'xm-select-skin',DIRECTION = "xm-select-direction",HEIGHT = 'xm-select-height',DISABLED = 'xm-dis-disabled',DIS = 'xm-select-dis',TEMP = 'xm-select-temp',RADIO = 'xm-select-radio',LINKAGE = 'xm-select-linkage',DL = 'xm-select-dl',DD_HIDE = 'xm-select-hide',HIDE_INPUT = 'xm-hide-input',SANJIAO = 'xm-select-sj',ICON_CLOSE = 'xm-icon-close',FORM_TITLE = 'xm-select-title',FORM_SELECT = 'xm-form-select',FORM_SELECTED = 'xm-form-selected',FORM_NONE = 'xm-select-none',FORM_EMPTY = 'xm-select-empty',FORM_INPUT = 'xm-input',FORM_DL_INPUT = 'xm-dl-input',FORM_SELECT_TIPS = 'xm-select-tips',CHECKBOX_YES = 'xm-iconfont',FORM_TEAM_PID = 'XM_PID_VALUE',CZ = 'xm-cz',CZ_GROUP = 'xm-cz-group',TIPS = '请选择',data = {},events = {on: {},endOn: {},filter: {},maxTips: {},opened: {},closed: {}},ajax = {type: 'get',header: {},first: true,data: {},searchUrl: '',searchName: 'keyword',searchVal: null,keyName: 'name',keyVal: 'value',keySel: 'selected',keyDis: 'disabled',keyChildren: 'children',dataType: '',delay: 500,beforeSuccess: null,success: null,error: null,beforeSearch: null,response: {statusCode: 0,statusName: 'code',msgName: 'msg',dataName: 'data'},tree: {nextClick: function nextClick(id, item, callback) {callback([]);},folderChoose: true,lazy: true}},quickBtns = [{icon: 'xm-iconfont icon-quanxuan',name: '全选',click: function click(id, cm) {cm.selectAll(id, true, true);}}, {icon: 'xm-iconfont icon-qingkong',name: '清空',click: function click(id, cm) {cm.removeAll(id, true, true);}}, {icon: 'xm-iconfont icon-fanxuan',name: '反选',click: function click(id, cm) {cm.reverse(id, true, true);}}, {icon: 'xm-iconfont icon-pifu',name: '换肤',click: function click(id, cm) {cm.skin(id);}}],$ = window.$ || window.layui && window.layui.jquery,$win = $(window),ajaxs = {},fsConfig = {},fsConfigs = {},FormSelects = function FormSelects(options) {var _this = this;this.config = {name: null, //xm-select="xxx"max: null,maxTips: function maxTips(id, vals, val, max) {var ipt = $('[xid="' + _this.config.name + '"]').prev().find('.' + NAME);if(ipt.parents('.layui-form-item[pane]').length) {ipt = ipt.parents('.layui-form-item[pane]');}ipt.attr('style', 'border-color: red !important');setTimeout(function() {ipt.removeAttr('style');}, 300);},init: null, //初始化的选择值,on: null, //select值发生变化opened: null,closed: null,filter: function filter(id, inputVal, val, isDisabled) {return val.name.indexOf(inputVal) == -1;},clearid: -1,direction: 'auto',height: null,isEmpty: false,btns: [quickBtns[0], quickBtns[1], quickBtns[2]],searchType: 0,create: function create(id, name) {return Date.now();},template: function template(id, item) {return item.name;},showCount: 0,isCreate: false,placeholder: TIPS,clearInput: false};this.select = null;this.values = [];$.extend(this.config, options, {searchUrl: options.isSearch ? options.searchUrl : null,placeholder: options.optionsFirst ? options.optionsFirst.value ? TIPS : options.optionsFirst.innerHTML || TIPS : TIPS,btns: options.radio ? [quickBtns[1]] : [quickBtns[0], quickBtns[1], quickBtns[2]]}, fsConfigs[options.name] || fsConfig);if(isNaN(this.config.showCount) || this.config.showCount <= 0) {this.config.showCount = 19921012;}};//一些简单的处理方法var Common = function Common() {this.appender();this.on();this.onreset();};Common.prototype.appender = function() {//针对IE做的一些拓展//拓展Array map方法if(!Array.prototype.map) {Array.prototype.map = function(i, h) {var b,a,c,e = Object(this),f = e.length >>> 0;if(h) {b = h;}a = new Array(f);c = 0;while(c < f) {var d, g;if(c in e) {d = e[c];g = i.call(b, d, c, e);a[c] = g;}c++;}return a;};};//拓展Array foreach方法if(!Array.prototype.forEach) {Array.prototype.forEach = function forEach(g, b) {var d, c;if(this == null) {throw new TypeError("this is null or not defined");}var f = Object(this);var a = f.length >>> 0;if(typeof g !== "function") {throw new TypeError(g + " is not a function");}if(arguments.length > 1) {d = b;}c = 0;while(c < a) {var e;if(c in f) {e = f[c];g.call(d, e, c, f);}c++;}};};//拓展Array filter方法if(!Array.prototype.filter) {Array.prototype.filter = function(b) {if(this === void 0 || this === null) {throw new TypeError();}var f = Object(this);var a = f.length >>> 0;if(typeof b !== "function") {throw new TypeError();}var e = [];var d = arguments[1];for(var c = 0; c < a; c++) {if(c in f) {var g = f[c];if(b.call(d, g, c, f)) {e.push(g);}}}return e;};};};Common.prototype.init = function(target) {var _this2 = this;//初始化页面上已有的select$(target ? target : 'select[' + NAME + ']').each(function(index, select) {var othis = $(select),id = othis.attr(NAME),hasLayuiRender = othis.next('.layui-form-select'),hasRender = othis.next('.' + PNAME),options = {name: id,disabled: select.disabled,max: othis.attr(MAX) - 0,isSearch: othis.attr(SEARCH) != undefined,searchUrl: othis.attr(SEARCH),isCreate: othis.attr(CREATE) != undefined,radio: othis.attr(RADIO) != undefined,skin: othis.attr(SKIN),direction: othis.attr(DIRECTION),optionsFirst: select.options[0],height: othis.attr(HEIGHT),formname: othis.attr('name') || othis.attr('_name'),layverify: othis.attr('lay-verify') || othis.attr('_lay-verify'),layverType: othis.attr('lay-verType'),searchType: othis.attr(SEARCH_TYPE) == 'dl' ? 1 : 0,showCount: othis.attr(SHOW_COUNT) - 0},value = othis.find('option[selected]').toArray().map(function(option) {//获取已选中的数据return {name: option.innerHTML,value: option.value};}),fs = new FormSelects(options);fs.values = value;if(fs.config.init) {fs.values = fs.config.init.map(function(item) {if((typeof item === 'undefined' ? 'undefined' : _typeof(item)) == 'object') {return item;}return {name: othis.find('option[value="' + item + '"]').text(),value: item};}).filter(function(item) {return item.name;});fs.config.init = fs.values.concat([]);} else {fs.config.init = value.concat([]);}!fs.values && (fs.values = []);data[id] = fs;//先取消layui对select的渲染hasLayuiRender[0] && hasLayuiRender.remove();hasRender[0] && hasRender.remove();//构造渲染divvar dinfo = _this2.renderSelect(id, fs.config.placeholder, select);var heightStyle = !fs.config.height || fs.config.height == 'auto' ? '' : 'xm-hg style="height: 34px;"';var inputHtml = ['<div class="' + LABEL + '">', '<input type="text" fsw class="' + FORM_INPUT + ' ' + INPUT + '" ' + (fs.config.isSearch ? '' : 'style="display: none;"') + ' autocomplete="off" debounce="0" />', '</div>'];var reElem = $('<div class="' + FORM_SELECT + '" ' + SKIN + '="' + fs.config.skin + '">\n\t\t\t\t\t<input class="' + HIDE_INPUT + '" value="" name="' + fs.config.formname + '" lay-verify="' + fs.config.layverify + '" lay-verType="' + fs.config.layverType + '" type="text" style="position: absolute;bottom: 0; z-index: -1;width: 100%; height: 100%; border: none; opacity: 0;"/>\n\t\t\t\t\t<div class="' + FORM_TITLE + ' ' + (fs.config.disabled ? DIS : '') + '">\n\t\t\t\t\t\t<div class="' + FORM_INPUT + ' ' + NAME + '" ' + heightStyle + '>\n\t\t\t\t\t\t\t' + inputHtml.join('') + '\n\t\t\t\t\t\t\t<i class="' + SANJIAO + '"></i>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class="' + TDIV + '">\n\t\t\t\t\t\t\t<input type="text" autocomplete="off" placeholder="' + fs.config.placeholder + '" readonly="readonly" unselectable="on" class="' + FORM_INPUT + '">\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<dl xid="' + id + '" class="' + DL + ' ' + (fs.config.radio ? RADIO : '') + '">' + dinfo + '</dl>\n\t\t\t\t</div>');var $parent = $('<div class="' + PNAME + '" FS_ID="' + id + '"></div>');$parent.append(reElem);othis.after($parent);othis.attr('lay-ignore', '');othis.removeAttr('name') && othis.attr('_name', fs.config.formname);othis.removeAttr('lay-verify') && othis.attr('_lay-verify', fs.config.layverify);//如果可搜索, 加上事件if(fs.config.isSearch) {ajaxs[id] = $.extend({}, ajax, { searchUrl: fs.config.searchUrl }, ajaxs[id]);$(document).on('input', 'div.' + PNAME + '[FS_ID="' + id + '"] .' + INPUT, function(e) {_this2.search(id, e, fs.config.searchUrl);});if(fs.config.searchUrl) {//触发第一次请求事件_this2.triggerSearch(reElem, true);}} else {//隐藏第二个dlreElem.find('dl dd.' + FORM_DL_INPUT).css('display', 'none');}});};Common.prototype.search = function(id, e, searchUrl, call) {var _this3 = this;var input = void 0;if(call) {input = call;} else {input = e.target;var keyCode = e.keyCode;if(keyCode === 9 || keyCode === 13 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40) {return false;}}var inputValue = $.trim(input.value);//过滤一下tipsthis.changePlaceHolder($(input));var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;searchUrl = ajaxConfig.searchUrl || searchUrl;var fs = data[id],isCreate = fs.config.isCreate,reElem = $('dl[xid="' + id + '"]').parents('.' + FORM_SELECT);//如果开启了远程搜索if(searchUrl) {if(ajaxConfig.searchVal) {inputValue = ajaxConfig.searchVal;ajaxConfig.searchVal = '';}if(!ajaxConfig.beforeSearch || ajaxConfig.beforeSearch && ajaxConfig.beforeSearch instanceof Function && ajaxConfig.beforeSearch(id, searchUrl, inputValue)) {var delay = ajaxConfig.delay;if(ajaxConfig.first) {ajaxConfig.first = false;delay = 10;}clearTimeout(fs.clearid);fs.clearid = setTimeout(function() {reElem.find('dl > *:not(.' + FORM_SELECT_TIPS + ')').remove();reElem.find('dd.' + FORM_NONE).addClass(FORM_EMPTY).text('请求中');_this3.ajax(id, searchUrl, inputValue, false, null, true);}, delay);}} else {reElem.find('dl .' + DD_HIDE).removeClass(DD_HIDE);//遍历选项, 选择可以显示的值reElem.find('dl dd:not(.' + FORM_SELECT_TIPS + ')').each(function(idx, item) {var _item = $(item);var searchFun = events.filter[id] || data[id].config.filter;if(searchFun && searchFun(id, inputValue, _this3.getItem(id, _item), _item.hasClass(DISABLED)) == true) {_item.addClass(DD_HIDE);}});//控制分组名称reElem.find('dl dt').each(function(index, item) {if(!$(item).nextUntil('dt', ':not(.' + DD_HIDE + ')').length) {$(item).addClass(DD_HIDE);}});//动态创建this.create(id, isCreate, inputValue);var shows = reElem.find('dl dd:not(.' + FORM_SELECT_TIPS + '):not(.' + DD_HIDE + ')');if(!shows.length) {reElem.find('dd.' + FORM_NONE).addClass(FORM_EMPTY).text('无匹配项');} else {reElem.find('dd.' + FORM_NONE).removeClass(FORM_EMPTY);}}};Common.prototype.isArray = function(obj) {return Object.prototype.toString.call(obj) == "[object Array]";};Common.prototype.triggerSearch = function(div, isCall) {var _this4 = this;(div ? [div] : $('.' + FORM_SELECT).toArray()).forEach(function(reElem, index) {reElem = $(reElem);var id = reElem.find('dl').attr('xid');if(id && data[id] && data[id].config.isEmpty || isCall) {_this4.search(id, null, null, data[id].config.searchType == 0 ? reElem.find('.' + LABEL + ' .' + INPUT) : reElem.find('dl .' + FORM_DL_INPUT + ' .' + INPUT));}});};Common.prototype.clearInput = function(id) {var div = $('.' + PNAME + '[fs_id="' + id + '"]');var input = data[id].config.searchType == 0 ? div.find('.' + LABEL + ' .' + INPUT) : div.find('dl .' + FORM_DL_INPUT + ' .' + INPUT);input.val('');};Common.prototype.ajax = function(id, searchUrl, inputValue, isLinkage, linkageWidth, isSearch, successCallback, isReplace) {var _this5 = this;var reElem = $('.' + PNAME + ' dl[xid="' + id + '"]').parents('.' + FORM_SELECT);if(!reElem[0] || !searchUrl) {return;}var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;var ajaxData = $.extend(true, {}, ajaxConfig.data);ajaxData[ajaxConfig.searchName] = inputValue;//是否需要对ajax添加随机时间//ajaxData['_'] = Date.now();$.ajax({type: ajaxConfig.type,headers: ajaxConfig.header,url: searchUrl,data: ajaxConfig.dataType == 'json' ? JSON.stringify(ajaxData) : ajaxData,success: function success(res) {if(typeof res == 'string') {res = JSON.parse(res);}ajaxConfig.beforeSuccess && ajaxConfig.beforeSuccess instanceof Function && (res = ajaxConfig.beforeSuccess(id, searchUrl, inputValue, res));if(_this5.isArray(res)) {var newRes = {};newRes[ajaxConfig.response.statusName] = ajaxConfig.response.statusCode;newRes[ajaxConfig.response.msgName] = "";newRes[ajaxConfig.response.dataName] = res;res = newRes;}if(res[ajaxConfig.response.statusName] != ajaxConfig.response.statusCode) {reElem.find('dd.' + FORM_NONE).addClass(FORM_EMPTY).text(res[ajaxConfig.response.msgName]);} else {reElem.find('dd.' + FORM_NONE).removeClass(FORM_EMPTY);_this5.renderData(id, res[ajaxConfig.response.dataName], isLinkage, linkageWidth, isSearch, isReplace);data[id].config.isEmpty = res[ajaxConfig.response.dataName].length == 0;}successCallback && successCallback(id);ajaxConfig.success && ajaxConfig.success instanceof Function && ajaxConfig.success(id, searchUrl, inputValue, res);},error: function error(err) {reElem.find('dd[lay-value]:not(.' + FORM_SELECT_TIPS + ')').remove();reElem.find('dd.' + FORM_NONE).addClass(FORM_EMPTY).text('服务异常');ajaxConfig.error && ajaxConfig.error instanceof Function && ajaxConfig.error(id, searchUrl, inputValue, err);}});};Common.prototype.renderData = function(id, dataArr, linkage, linkageWidth, isSearch, isReplace) {var _this6 = this;if(linkage) {//渲染多级联动this.renderLinkage(id, dataArr, linkageWidth);return;}if(isReplace) {this.renderReplace(id, dataArr);return;}var reElem = $('.' + PNAME + ' dl[xid="' + id + '"]').parents('.' + FORM_SELECT);var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;var pcInput = reElem.find('.' + TDIV + ' input');dataArr = this.exchangeData(id, dataArr);var values = [];reElem.find('dl').html(this.renderSelect(id, pcInput.attr('placeholder') || pcInput.attr('back'), dataArr.map(function(item) {var itemVal = $.extend({}, item, {innerHTML: item[ajaxConfig.keyName],value: item[ajaxConfig.keyVal],sel: item[ajaxConfig.keySel],disabled: item[ajaxConfig.keyDis],type: item.type,name: item[ajaxConfig.keyName]});if(itemVal.sel) {values.push(itemVal);}return itemVal;})));var label = reElem.find('.' + LABEL);var dl = reElem.find('dl[xid]');if(isSearch) {//如果是远程搜索, 这里需要判重var oldVal = data[id].values;oldVal.forEach(function(item, index) {dl.find('dd[lay-value="' + item.value + '"]').addClass(THIS);});values.forEach(function(item, index) {if(_this6.indexOf(oldVal, item) == -1) {_this6.addLabel(id, label, item);dl.find('dd[lay-value="' + item.value + '"]').addClass(THIS);oldVal.push(item);}});} else {values.forEach(function(item, index) {_this6.addLabel(id, label, item);dl.find('dd[lay-value="' + item.value + '"]').addClass(THIS);});data[id].values = values;}this.commonHandler(id, label);};Common.prototype.renderLinkage = function(id, dataArr, linkageWidth) {var result = [],index = 0,temp = { "0": dataArr },ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;db[id] = {};var _loop = function _loop() {var group = result[index++] = [],_temp = temp;temp = {};$.each(_temp, function(pid, arr) {$.each(arr, function(idx, item) {var val = {pid: pid,name: item[ajaxConfig.keyName],value: item[ajaxConfig.keyVal]};db[id][val.value] = $.extend(item, val);group.push(val);var children = item[ajaxConfig.keyChildren];if(children && children.length) {temp[val.value] = children;}});});};do {_loop();} while (Object.getOwnPropertyNames(temp).length);var reElem = $('.' + PNAME + ' dl[xid="' + id + '"]').parents('.' + FORM_SELECT);var html = ['<div class="xm-select-linkage">'];$.each(result, function(idx, arr) {var groupDiv = ['<div style="left: ' + (linkageWidth - 0) * idx + 'px;" class="xm-select-linkage-group xm-select-linkage-group' + (idx + 1) + ' ' + (idx != 0 ? 'xm-select-linkage-hide' : '') + '">'];$.each(arr, function(idx2, item) {var span = '<li title="' + item.name + '" pid="' + item.pid + '" xm-value="' + item.value + '"><span>' + item.name + '</span></li>';groupDiv.push(span);});groupDiv.push('</div>');html = html.concat(groupDiv);});html.push('<div style="clear: both; height: 288px;"></div>');html.push('</div>');reElem.find('dl').html(html.join(''));reElem.find('.' + INPUT).css('display', 'none'); //联动暂时不支持搜索};Common.prototype.renderReplace = function(id, dataArr) {var _this7 = this;var dl = $('.' + PNAME + ' dl[xid="' + id + '"]');var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;dataArr = this.exchangeData(id, dataArr);db[id] = dataArr;var html = dataArr.map(function(item) {var itemVal = $.extend({}, item, {innerHTML: item[ajaxConfig.keyName],value: item[ajaxConfig.keyVal],sel: item[ajaxConfig.keySel],disabled: item[ajaxConfig.keyDis],type: item.type,name: item[ajaxConfig.keyName]});return _this7.createDD(id, itemVal);}).join('');dl.find('dd:not(.' + FORM_SELECT_TIPS + '),dt:not([style])').remove();dl.find('dt[style]').after($(html));};Common.prototype.exchangeData = function(id, arr) {//这里处理树形结构var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;var childrenName = ajaxConfig['keyChildren'];var disabledName = ajaxConfig['keyDis'];db[id] = {};var result = this.getChildrenList(arr, childrenName, disabledName, [], false);return result;};Common.prototype.getChildrenList = function(arr, childrenName, disabledName, pid, disabled) {var result = [],offset = 0;for(var a = 0; a < arr.length; a++) {var item = arr[a];if(item.type && item.type == 'optgroup') {result.push(item);continue;} else {offset++;}var parentIds = pid.concat([]);parentIds.push(offset - 1 + '_E');item[FORM_TEAM_PID] = JSON.stringify(parentIds);item[disabledName] = item[disabledName] || disabled;result.push(item);var child = item[childrenName];if(child && common.isArray(child) && child.length) {item['XM_TREE_FOLDER'] = true;var pidArr = parentIds.concat([]);var childResult = this.getChildrenList(child, childrenName, disabledName, pidArr, item[disabledName]);result = result.concat(childResult);}}return result;};Common.prototype.create = function(id, isCreate, inputValue) {if(isCreate && inputValue) {var fs = data[id],dl = $('[xid="' + id + '"]'),tips = dl.find('dd.' + FORM_SELECT_TIPS + '.' + FORM_DL_INPUT),tdd = null,temp = dl.find('dd.' + TEMP);dl.find('dd:not(.' + FORM_SELECT_TIPS + '):not(.' + TEMP + ')').each(function(index, item) {if(inputValue == $(item).find('span').attr('name')) {tdd = item;}});if(!tdd) {//如果不存在, 则创建var val = fs.config.create(id, inputValue);if(temp[0]) {temp.attr('lay-value', val);temp.find('span').text(inputValue);temp.find('span').attr("name", inputValue);temp.removeClass(DD_HIDE);} else {tips.after($(this.createDD(id, {name: inputValue,innerHTML: inputValue,value: val}, TEMP + ' ' + CREATE_LONG)));}}} else {$('[xid=' + id + '] dd.' + TEMP).remove();}};Common.prototype.createDD = function(id, item, clz) {var ajaxConfig = ajaxs[id] ? ajaxs[id] : ajax;var name = $.trim(item.innerHTML);db[id][item.value] = $(item).is('option') ? item = function() {var resultItem = {};resultItem[ajaxConfig.keyName] = name;resultItem[ajaxConfig.keyVal] = item.value;resultItem[ajaxConfig.keyDis] = item.disabled;return resultItem;}() : item;var template = data[id].config.template(id, item);var pid = item[FORM_TEAM_PID];pid ? pid = JSON.parse(pid) : pid = [-1];var attr = pid[0] == -1 ? '' : 'tree-id="' + pid.join('-') + '" tree-folder="' + !!item['XM_TREE_FOLDER'] + '"';//console.log('item', item);if(item.children) {return '<dd lay-value="' + item.value + '" class="' + (item.disabled ? DISABLED : '') + ' ' + (clz ? clz : '') + '" ' + attr + '>\n\t\t\t\t\t<div class="xm-unselect xm-form-checkbox ' + (item.disabled ? DISABLED : '') + '"  style="margin-left: ' + (pid.length - 1) * 30 + 'px">\n\t\t\t\t\t\t<i class="' + CHECKBOX_YES + '"></i>\n\t\t\t\t\t\t<span name="' + name + '">' + '<li class="icon-li"><i class="icon-triangle"></i></li>' + template + '</span>\n\t\t\t\t\t</div>\n\t\t\t\t</dd>';} else {return '<dd lay-value="' + item.value + '" class="' + (item.disabled ? DISABLED : '') + ' ' + (clz ? clz : '') + '" ' + attr + '>\n\t\t\t\t\t<div class="xm-unselect xm-form-checkbox ' + (item.disabled ? DISABLED : '') + '"  style="margin-left: ' + (pid.length - 1) * 30 + 'px">\n\t\t\t\t\t\t<i class="' + CHECKBOX_YES + '"></i>\n\t\t\t\t\t\t<span name="' + name + '">' + '<i class="circle-dot"></i>' + template + '</span>\n\t\t\t\t\t</div>\n\t\t\t\t</dd>';}};Common.prototype.createQuickBtn = function(obj, right) {return '<div class="' + CZ + '" method="' + obj.name + '" title="' + obj.name + '" ' + (right ? 'style="margin-right: ' + right + '"' : '') + '><i class="' + obj.icon + '"></i><span>' + obj.name + '</span></div>';};Common.prototype.renderBtns = function(id, show, right) {var _this8 = this;var quickBtn = [];var dl = $('dl[xid="' + id + '"]');quickBtn.push('<div class="' + CZ_GROUP + '" show="' + show + '" style="max-width: ' + (dl.prev().width() - 54) + 'px;">');$.each(data[id].config.btns, function(index, item) {quickBtn.push(_this8.createQuickBtn(item, right));});quickBtn.push('</div>');quickBtn.push(this.createQuickBtn({ icon: 'xm-iconfont icon-caidan', name: '' }));return quickBtn.join('');};Common.prototype.renderSelect = function(id, tips, select) {var _this9 = this;db[id] = {};var arr = [];if(data[id].config.btns.length) {setTimeout(function() {var dl = $('dl[xid="' + id + '"]');dl.parents('.' + FORM_SELECT).attr(SEARCH_TYPE, data[id].config.searchType);dl.find('.' + CZ_GROUP).css('max-width', dl.prev().width() - 54 + 'px');}, 10);arr.push(['<dd lay-value="" class="' + FORM_SELECT_TIPS + '" style="background-color: #FFF!important;">', this.renderBtns(id, null, '30px'), '</dd>', '<dd lay-value="" class="' + FORM_SELECT_TIPS + ' ' + FORM_DL_INPUT + '" style="background-color: #FFF!important;">', '<i class="xm-iconfont icon-sousuo"></i>', '<input type="text" class="' + FORM_INPUT + ' ' + INPUT + '" placeholder="\u8BF7\u641C\u7D22"/>', '</dd>'].join(''));} else {arr.push('<dd lay-value="" class="' + FORM_SELECT_TIPS + '">' + tips + '</dd>');}if(this.isArray(select)) {$(select).each(function(index, item) {if(item) {if(item.type && item.type === 'optgroup') {arr.push('<dt>' + item.name + '</dt>');} else {arr.push(_this9.createDD(id, item));}}});} else {$(select).find('*').each(function(index, item) {if(item.tagName.toLowerCase() == 'option' && index == 0 && !item.value) {return;}if(item.tagName.toLowerCase() === 'optgroup') {arr.push('<dt>' + item.label + '</dt>');} else {arr.push(_this9.createDD(id, item));}});}arr.push('<dt style="display:none;"> </dt>');arr.push('<dd class="' + FORM_SELECT_TIPS + ' ' + FORM_NONE + ' ' + (arr.length === 2 ? FORM_EMPTY : '') + '">\u6CA1\u6709\u9009\u9879</dd>');return arr.join('');};Common.prototype.on = function() {var _this10 = this;//事件绑定this.one();$(document).on('click', function(e) {if(!$(e.target).parents('.' + FORM_TITLE)[0]) {//清空input中的值$('.' + PNAME + ' dl .' + DD_HIDE).removeClass(DD_HIDE);$('.' + PNAME + ' dl dd.' + FORM_EMPTY).removeClass(FORM_EMPTY);$('.' + PNAME + ' dl dd.' + TEMP).remove();$.each(data, function(key, fs) {_this10.clearInput(key);if(!fs.values.length) {_this10.changePlaceHolder($('div[FS_ID="' + key + '"] .' + LABEL));}});}$('.' + PNAME + ' .' + FORM_SELECTED).each(function(index, item) {_this10.changeShow($(item).find('.' + FORM_TITLE), false);});});};Common.prototype.calcLabelLeft = function(label, w, call) {var pos = this.getPosition(label[0]);pos.y = pos.x + label[0].clientWidth;var left = label[0].offsetLeft;if(!label.find('span').length) {left = 0;} else if(call) {//校正归位var span = label.find('span:last');span.css('display') == 'none' ? span = span.prev()[0] : span = span[0];var spos = this.getPosition(span);spos.y = spos.x + span.clientWidth;if(spos.y > pos.y) {left = left - (spos.y - pos.y) - 5;} else {left = 0;}} else {if(w < 0) {var _span = label.find(':last');_span.css('display') == 'none' ? _span = _span.prev()[0] : _span = _span[0];var _spos = this.getPosition(_span);_spos.y = _spos.x + _span.clientWidth;if(_spos.y > pos.y) {left -= 10;}} else {if(left < 0) {left += 10;}if(left > 0) {left = 0;}}}label.css('left', left + 'px');};Common.prototype.one = function(target) {var _this11 = this;//一次性事件绑定$(target ? target : document).off('click', '.' + FORM_TITLE).on('click', '.' + FORM_TITLE, function(e) {var othis = $(e.target),title = othis.is(FORM_TITLE) ? othis : othis.parents('.' + FORM_TITLE),dl = title.next(),id = dl.attr('xid');//清空非本select的input val$('dl[xid]').not(dl).each(function(index, item) {_this11.clearInput($(item).attr('xid'));});$('dl[xid]').not(dl).find('dd.' + DD_HIDE).removeClass(DD_HIDE);//如果是disabled selectif(title.hasClass(DIS)) {return false;}//如果点击的是右边的三角或者只读的inputif(othis.is('.' + SANJIAO) || othis.is('.' + INPUT + '[readonly]')) {_this11.changeShow(title, !title.parents('.' + FORM_SELECT).hasClass(FORM_SELECTED));return false;}//如果点击的是input的右边, focus一下if(title.find('.' + INPUT + ':not(readonly)')[0]) {var input = title.find('.' + INPUT),epos = { x: e.pageX, y: e.pageY },pos = _this11.getPosition(title[0]),width = title.width();while(epos.x > pos.x) {if($(document.elementFromPoint(epos.x, epos.y)).is(input)) {input.focus();_this11.changeShow(title, true);return false;}epos.x -= 50;}}//如果点击的是可搜索的inputif(othis.is('.' + INPUT)) {_this11.changeShow(title, true);return false;}//如果点击的是x按钮if(othis.is('i[fsw="' + NAME + '"]')) {var val = _this11.getItem(id, othis),dd = dl.find('dd[lay-value=\'' + val.value + '\']');if(dd.hasClass(DISABLED)) {//如果是disabled状态, 不可选, 不可删return false;}_this11.handlerLabel(id, dd, false, val);return false;}_this11.changeShow(title, !title.parents('.' + FORM_SELECT).hasClass(FORM_SELECTED));return false;});$(target ? target : document).off('click', 'dl.' + DL).on('click', 'dl.' + DL, function(e) {var othis = $(e.target);if(othis.is('.' + LINKAGE) || othis.parents('.' + LINKAGE)[0]) {//linkage的处理othis = othis.is('li') ? othis : othis.parents('li[xm-value]');var _group = othis.parents('.xm-select-linkage-group'),_id = othis.parents('dl').attr('xid');if(!_id) {return false;}//激活li_group.find('.xm-select-active').removeClass('xm-select-active');othis.addClass('xm-select-active');//激活下一个group, 激活前显示对应数据_group.nextAll('.xm-select-linkage-group').addClass('xm-select-linkage-hide');var nextGroup = _group.next('.xm-select-linkage-group');nextGroup.find('li').addClass('xm-select-linkage-hide');nextGroup.find('li[pid="' + othis.attr('xm-value') + '"]').removeClass('xm-select-linkage-hide');//如果没有下一个group, 或没有对应的值if(!nextGroup[0] || nextGroup.find('li:not(.xm-select-linkage-hide)').length == 0) {var vals = [],index = 0,isAdd = !othis.hasClass('xm-select-this');if(data[_id].config.radio) {othis.parents('.xm-select-linkage').find('.xm-select-this').removeClass('xm-select-this');}do {vals[index++] = {name: othis.find('span').text(),value: othis.attr('xm-value')};othis = othis.parents('.xm-select-linkage-group').prev().find('li[xm-value="' + othis.attr('pid') + '"]');} while (othis.length);vals.reverse();var val = {name: vals.map(function(item) {return item.name;}).join('/'),value: vals.map(function(item) {return item.value;}).join('/')};_this11.handlerLabel(_id, null, isAdd, val);} else {nextGroup.removeClass('xm-select-linkage-hide');}return false;}if(othis.is('dl')) {return false;}if(othis.is('dt')) {othis.nextUntil('dt').each(function(index, item) {item = $(item);if(item.hasClass(DISABLED) || item.hasClass(THIS)) {} else {item.find('i:not(.icon-expand)').click();}});return false;}var dd = othis.is('dd') ? othis : othis.parents('dd');var id = dd.parent('dl').attr('xid');if(dd.hasClass(DISABLED)) {//被禁用选项的处理return false;}//菜单功效if(othis.is('i.icon-caidan')) {var opens = [],closes = [];othis.parents('dl').find('dd[tree-folder="true"]').each(function(index, item) {$(item).attr('xm-tree-hidn') == undefined ? opens.push(item) : closes.push(item);});var arr = closes.length ? closes : opens;arr.forEach(function(item) {return item.click();});return false;}//树状结构的选择var treeId = dd.attr('tree-id');if(treeId) {//忽略右边的图标var ajaxConfig = ajaxs[id] || ajax;var treeConfig = ajaxConfig.tree;var childrens = dd.nextAll('dd[tree-id^="' + treeId + '"]');if(othis.is('i.icon-triangle') || othis.is('li.icon-li')) {if(childrens && childrens.length) {var len = childrens[0].clientHeight;len ? (_this11.addTreeHeight(dd, len), len = 0) : (len = dd.attr('xm-tree-hidn') || 36,dd.find('.icon-li').removeClass('xm-tree-expand'),dd.removeAttr('xm-tree-hidn'), dd.find('>i').remove(), childrens = childrens.filter(function(index, item) {return $(item).attr('tree-id').split('-').length - 1 == treeId.split('-').length;}));childrens.animate({height: len}, 150);return false;} } else {var childrens = dd.nextAll('dd[tree-id^="' + treeId + '"]');if(data[id].config.radio){_this11.handlerLabel(id, dd, true);}else{_this11.handlerLabel(id, dd, !dd.hasClass(THIS));if(childrens && childrens.length){childrens.each(function(index, item) {_this11.handlerLabel(id, $(item), dd.hasClass(THIS));});}}if(treeConfig.nextClick && treeConfig.nextClick instanceof Function) {treeConfig.nextClick(id, _this11.getItem(id, dd), function(res) {if(!res || !res.length) {_this11.handlerLabel(id, dd, !dd.hasClass(THIS));} else {dd.attr('tree-folder', 'true');var ddChilds = [];res.forEach(function(item, idx) {item.innerHTML = item[ajaxConfig.keyName];item[FORM_TEAM_PID] = JSON.stringify(treeId.split('-').concat([idx]));ddChilds.push(_this11.createDD(id, item));db[id][item[ajaxConfig.keyVal]] = item;});dd.after(ddChilds.join(''));}});return false;}return false;}}if(dd.hasClass(FORM_SELECT_TIPS)) {//tips的处理var btn = othis.is('.' + CZ) ? othis : othis.parents('.' + CZ);if(!btn[0]) {return false;}var method = btn.attr('method');var obj = data[id].config.btns.filter(function(bean) {return bean.name == method;})[0];obj && obj.click && obj.click instanceof Function && obj.click(id, _this11);return false;}_this11.handlerLabel(id, dd, !dd.hasClass(THIS));return false;});};Common.prototype.addTreeHeight = function(dd, len) {var _this12 = this;var treeId = dd.attr('tree-id');var childrens = dd.nextAll('dd[tree-id^="' + treeId + '"]');if(childrens.length) {$(dd).find('.icon-li').addClass('xm-tree-expand');dd.attr('xm-tree-hidn', len);childrens.each(function(index, item) {var that = $(item);_this12.addTreeHeight(that, len);});}};var db = {};Common.prototype.getItem = function(id, value) {if(value instanceof $) {if(value.is('i[fsw="' + NAME + '"]')) {var span = value.parent();return db[id][value] || {name: span.find('font').text(),value: span.attr('value')};}var val = value.attr('lay-value');return !db[id][val] ? db[id][val] = {name: value.find('span[name]').attr('name'),value: val} : db[id][val];} else if(typeof value == 'string' && value.indexOf('/') != -1) {return db[id][value] || {name: this.valToName(id, value),value: value};}return db[id][value];};Common.prototype.linkageAdd = function(id, val) {var dl = $('dl[xid="' + id + '"]');dl.find('.xm-select-active').removeClass('xm-select-active');var vs = val.value.split('/');var pid = void 0,li = void 0,index = 0;var lis = [];do {pid = vs[index];li = dl.find('.xm-select-linkage-group' + (index + 1) + ' li[xm-value="' + pid + '"]');li[0] && lis.push(li);index++;} while (li.length && pid != undefined);if(lis.length == vs.length) {$.each(lis, function(idx, item) {item.addClass('xm-select-this');});}};Common.prototype.linkageDel = function(id, val) {var dl = $('dl[xid="' + id + '"]');var vs = val.value.split('/');var pid = void 0,li = void 0,index = vs.length - 1;do {pid = vs[index];li = dl.find('.xm-select-linkage-group' + (index + 1) + ' li[xm-value="' + pid + '"]');if(!li.parent().next().find('li[pid=' + pid + '].xm-select-this').length) {li.removeClass('xm-select-this');}index--;} while (li.length && pid != undefined);};Common.prototype.valToName = function(id, val) {var dl = $('dl[xid="' + id + '"]');var vs = (val + "").split('/');if(!vs.length) {return null;}var names = [];$.each(vs, function(idx, item) {var name = dl.find('.xm-select-linkage-group' + (idx + 1) + ' li[xm-value="' + item + '"] span').text();names.push(name);});return names.length == vs.length ? names.join('/') : null;};Common.prototype.commonHandler = function(key, label) {if(!label || !label[0]) {return;}this.checkHideSpan(key, label);//计算input的提示语this.changePlaceHolder(label);//计算高度this.retop(label.parents('.' + FORM_SELECT));this.calcLabelLeft(label, 0, true);//表单默认值this.setHidnVal(key, label);//title值label.parents('.' + FORM_TITLE + ' .' + NAME).attr('title', data[key].values.map(function(val) {return val.name;}).join(','));};Common.prototype.initVal = function(id) {var _this13 = this;var target = {};if(id) {target[id] = data[id];} else {target = data;}$.each(target, function(key, val) {var values = val.values,div = $('dl[xid="' + key + '"]').parent(),label = div.find('.' + LABEL),dl = div.find('dl');dl.find('dd.' + THIS).removeClass(THIS);var _vals = values.concat([]);_vals.concat([]).forEach(function(item, index) {_this13.addLabel(key, label, item);dl.find('dd[lay-value="' + item.value + '"]').addClass(THIS);});if(val.config.radio) {_vals.length && values.push(_vals[_vals.length - 1]);}_this13.commonHandler(key, label);});};Common.prototype.setHidnVal = function(key, label) {if(!label || !label[0]) {return;}label.parents('.' + PNAME).find('.' + HIDE_INPUT).val(data[key].values.map(function(val) {return val.value;}).join(','));};Common.prototype.setParent = function(id, index) {if(index != -1) {var id = id.substring(0, index);this.setParent(id, id.lastIndexOf('-'));}return;};Common.prototype.handlerLabel = function(id, dd, isAdd, oval, notOn) {var div = $('[xid="' + id + '"]').prev().find('.' + LABEL),val = dd && this.getItem(id, dd),vals = data[id].values,on = data[id].config.on || events.on[id],endOn = data[id].config.endOn || events.endOn[id];if(oval) {val = oval;}var fs = data[id];if(isAdd && fs.config.max && fs.values.length >= fs.config.max) {var maxTipsFun = events.maxTips[id] || data[id].config.maxTips;maxTipsFun && maxTipsFun(id, vals.concat([]), val, fs.config.max);return;}if(!notOn) {if(on && on instanceof Function && on(id, vals.concat([]), val, isAdd, dd && dd.hasClass(DISABLED)) == false) {return;}}var dl = $('dl[xid="' + id + '"]');var treeId = dd.attr('tree-id');var childrens = dd.nextAll('dd[tree-id^="' + treeId + '"]');//(this.addLabel(id, div, val), vals.push(val))//console.log(""+fs.config.radio);isAdd ? (dd && dd[0] ? (dd.addClass(THIS), dd.removeClass(TEMP)) : dl.find('.xm-select-linkage')[0] && this.linkageAdd(id, val), ((!fs.config.radio && childrens && childrens.length) || (JSON.stringify(vals).indexOf(JSON.stringify(val)) != -1)) ? undefined : (this.addLabel(id, div, val), vals.push(val))) : (dd && dd[0] ? dd.removeClass(THIS) : dl.find('.xm-select-linkage')[0] && this.linkageDel(id, val), this.delLabel(id, div, val), this.remove(vals, val));if(!div[0]) return;//单选选完后直接关闭选择域if(fs.config.radio) {this.changeShow(div, false);}//移除表单验证的红色边框div.parents('.' + FORM_TITLE).prev().removeClass('layui-form-danger');//清空搜索值fs.config.clearInput && this.clearInput(id);this.commonHandler(id, div);!notOn && endOn && endOn instanceof Function && endOn(id, vals.concat([]), val, isAdd, dd && dd.hasClass(DISABLED));};Common.prototype.addLabel = function(id, div, val) {if(!val) return;var tips = 'fsw="' + NAME + '"';var _ref = [$('<span ' + tips + ' value="' + val.value + '"><font ' + tips + '>' + val.name + '</font></span>'), $('<i ' + tips + ' class="xm-iconfont icon-close"></i>')],$label = _ref[0],$close = _ref[1];$label.append($close);//如果是radio模式var fs = data[id];if(fs.config.radio) {fs.values.length = 0;$('dl[xid="' + id + '"]').find('dd.' + THIS + ':not([lay-value="' + val.value + '"])').removeClass(THIS);div.find('span').remove();}//如果是固定高度div.find('input').css('width', '50px');div.find('input').before($label);};Common.prototype.delLabel = function(id, div, val) {if(!val) return;div.find('span[value="' + val.value + '"]:first').remove();};Common.prototype.checkHideSpan = function(id, div) {var parentHeight = div.parents('.' + NAME)[0].offsetHeight + 5;div.find('span.xm-span-hide').removeClass('xm-span-hide');div.find('span[style]').remove();var count = data[id].config.showCount;div.find('span').each(function(index, item) {if(index >= count) {$(item).addClass('xm-span-hide');}});var prefix = div.find('span:eq(' + count + ')');prefix[0] && prefix.before($('<span style="padding-right: 6px;" fsw="' + NAME + '"> + ' + (div.find('span').length - count) + '</span>'));};Common.prototype.retop = function(div) {//计算dl显示的位置var dl = div.find('dl'),top = div.offset().top + div.outerHeight() + 5 - $win.scrollTop(),dlHeight = dl.outerHeight();var up = div.hasClass('layui-form-selectup') || dl.css('top').indexOf('-') != -1 || top + dlHeight > $win.height() && top >= dlHeight;div = div.find('.' + NAME);var fs = data[dl.attr('xid')];var base = dl.parents('.layui-form-pane')[0] && dl.prev()[0].clientHeight > 38 ? 14 : 10;if(fs && fs.config.direction == 'up' || up) {up = true;if(fs && fs.config.direction == 'down') {up = false;}}var reHeight = div[0].offsetTop + div.height() + base;if(up) {dl.css({top: 'auto',bottom: reHeight + 3 + 'px'});} else {dl.css({top: reHeight + 'px',bottom: 'auto'});}};Common.prototype.changeShow = function(children, isShow) {//显示于隐藏$('.layui-form-selected').removeClass('layui-form-selected');var top = children.parents('.' + FORM_SELECT),realShow = top.hasClass(FORM_SELECTED),id = top.find('dl').attr('xid');$('.' + PNAME + ' .' + FORM_SELECT).not(top).removeClass(FORM_SELECTED);if(isShow) {this.retop(top);top.addClass(FORM_SELECTED);top.find('.' + INPUT).focus();if(!top.find('dl dd[lay-value]:not(.' + FORM_SELECT_TIPS + ')').length) {top.find('dl .' + FORM_NONE).addClass(FORM_EMPTY);}} else {top.removeClass(FORM_SELECTED);this.clearInput(id);top.find('dl .' + FORM_EMPTY).removeClass(FORM_EMPTY);top.find('dl dd.' + DD_HIDE).removeClass(DD_HIDE);top.find('dl dd.' + TEMP).remove();//计算ajax数据是否为空, 然后重新请求数据if(id && data[id] && data[id].config.isEmpty) {this.triggerSearch(top);}this.changePlaceHolder(top.find('.' + LABEL));}if(isShow != realShow) {var openFun = data[id].config.opened || events.opened[id];isShow && openFun && openFun instanceof Function && openFun(id);var closeFun = data[id].config.closed || events.closed[id];!isShow && closeFun && closeFun instanceof Function && closeFun(id);}};Common.prototype.changePlaceHolder = function(div) {//显示于隐藏提示语//调整pane模式下的高度var title = div.parents('.' + FORM_TITLE);title[0] || (title = div.parents('dl').prev());if(!title[0]) {return;}var id = div.parents('.' + PNAME).find('dl[xid]').attr('xid');if(data[id] && data[id].config.height) { //既然固定高度了, 那就看着办吧} else {var height = title.find('.' + NAME)[0].clientHeight;title.css('height', (height > 36 ? height + 4 : height) + 'px');//如果是layui pane模式, 处理label的高度var label = title.parents('.' + PNAME).parent().prev();if(label.is('.layui-form-label') && title.parents('.layui-form-pane')[0]) {height = height > 36 ? height + 4 : height;title.css('height', height + 'px');label.css({height: height + 2 + 'px',lineHeight: height - 18 + 'px'});}}var input = title.find('.' + TDIV + ' input'),isShow = !div.find('span:last')[0] && !title.find('.' + INPUT).val();if(isShow) {var ph = input.attr('back');input.removeAttr('back');input.attr('placeholder', ph);} else {var _ph = input.attr('placeholder');input.removeAttr('placeholder');input.attr('back', _ph);}};Common.prototype.indexOf = function(arr, val) {for(var i = 0; i < arr.length; i++) {if(arr[i].value == val || arr[i].value == (val ? val.value : val) || arr[i] == val || JSON.stringify(arr[i]) == JSON.stringify(val)) {return i;}}return -1;};Common.prototype.remove = function(arr, val) {var idx = this.indexOf(arr, val ? val.value : val);if(idx > -1) {arr.splice(idx, 1);return true;}return false;};Common.prototype.selectAll = function(id, isOn, skipDis) {var _this14 = this;var dl = $('[xid="' + id + '"]');if(!dl[0]) {return;}if(dl.find('.xm-select-linkage')[0]) {return;}dl.find('dd[lay-value]:not(.' + FORM_SELECT_TIPS + '):not(.' + THIS + ')' + (skipDis ? ':not(.' + DISABLED + ')' : '')).each(function(index, item) {item = $(item);var val = _this14.getItem(id, item);if(val.children) {} else {_this14.handlerLabel(id, dl.find('dd[lay-value="' + val.value + '"]'), true, val, !isOn);}});};Common.prototype.removeAll = function(id, isOn, skipDis) {var _this15 = this;var dl = $('[xid="' + id + '"]');if(!dl[0]) {return;}if(dl.find('.xm-select-linkage')[0]) {//针对多级联动的处理data[id].values.concat([]).forEach(function(item, idx) {var vs = item.value.split('/');var pid = void 0,li = void 0,index = 0;do {pid = vs[index++];li = dl.find('.xm-select-linkage-group' + index + ':not(.xm-select-linkage-hide) li[xm-value="' + pid + '"]');li.click();} while (li.length && pid != undefined);});return;}data[id].values.concat([]).forEach(function(item, index) {if(skipDis && dl.find('dd[lay-value="' + item.value + '"]').hasClass(DISABLED)) {} else {_this15.handlerLabel(id, dl.find('dd[lay-value="' + item.value + '"]'), false, item, !isOn);}});};Common.prototype.reverse = function(id, isOn, skipDis) {var _this16 = this;var dl = $('[xid="' + id + '"]');if(!dl[0]) {return;}if(dl.find('.xm-select-linkage')[0]) {return;}dl.find('dd[lay-value]:not(.' + FORM_SELECT_TIPS + ')' + (skipDis ? ':not(.' + DISABLED + ')' : '')).each(function(index, item) {item = $(item);var val = _this16.getItem(id, item);_this16.handlerLabel(id, dl.find('dd[lay-value="' + val.value + '"]'), !item.hasClass(THIS), val, !isOn);});};Common.prototype.skin = function(id) {var skins = ['default', 'primary', 'normal', 'warm', 'danger'];var skin = skins[Math.floor(Math.random() * skins.length)];$('dl[xid="' + id + '"]').parents('.' + PNAME).find('.' + FORM_SELECT).attr('xm-select-skin', skin);this.check(id) && this.commonHandler(id, $('dl[xid="' + id + '"]').parents('.' + PNAME).find('.' + LABEL));};Common.prototype.getPosition = function(e) {var x = 0,y = 0;while(e != null) {x += e.offsetLeft;y += e.offsetTop;e = e.offsetParent;}return { x: x, y: y };};Common.prototype.onreset = function() {//监听reset按钮, 然后重置多选$(document).on('click', '[type=reset]', function(e) {$(e.target).parents('form').find('.' + PNAME + ' dl[xid]').each(function(index, item) {var id = item.getAttribute('xid'),dl = $(item),dd = void 0,temp = {};common.removeAll(id);data[id].config.init.forEach(function(val, idx) {if(val && (!temp[val] || data[id].config.repeat) && (dd = dl.find('dd[lay-value="' + val.value + '"]'))[0]) {common.handlerLabel(id, dd, true);temp[val] = 1;}});});});};Common.prototype.bindEvent = function(name, id, fun) {if(id && id instanceof Function) {fun = id;id = null;}if(fun && fun instanceof Function) {if(!id) {$.each(data, function(id, val) {data[id] ? data[id].config[name] = fun : events[name][id] = fun;});} else {data[id] ? (data[id].config[name] = fun, delete events[name][id]) : events[name][id] = fun;}}};Common.prototype.check = function(id, notAutoRender) {if($('dl[xid="' + id + '"]').length) {return true;} else if($('select[xm-select="' + id + '"]').length) {if(!notAutoRender) {this.render(id, $('select[xm-select="' + id + '"]'));return true;}} else {delete data[id];return false;}};Common.prototype.render = function(id, select) {common.init(select);common.one($('dl[xid="' + id + '"]').parents('.' + PNAME));common.initVal(id);};Common.prototype.log = function(obj) {console.log(obj);};var Select4 = function Select4() {this.v = v;this.render();};var common = new Common();Select4.prototype.value = function(id, type, isAppend) {if(typeof id != 'string') {return [];}var fs = data[id];if(!common.check(id)) {return [];}if(typeof type == 'string' || type == undefined) {var arr = fs.values.concat([]) || [];if(type == 'val') {return arr.map(function(val) {return val.value;});}if(type == 'valStr') {return arr.map(function(val) {return val.value;}).join(',');}if(type == 'name') {return arr.map(function(val) {return val.name;});}if(type == 'nameStr') {return arr.map(function(val) {return val.name;}).join(',');}return arr;}if(common.isArray(type)) {var dl = $('[xid="' + id + '"]'),temp = {},dd = void 0,isAdd = true;if(isAppend == false) {//删除传入的数组isAdd = false;} else if(isAppend == true) {//追加模式isAdd = true;} else {//删除原有的数据common.removeAll(id);}if(isAdd) {fs.values.forEach(function(val, index) {temp[val.value] = 1;});}type.forEach(function(val, index) {if(val && (!temp[val] || fs.config.repeat)) {if((dd = dl.find('dd[lay-value="' + val + '"]'))[0]) {common.handlerLabel(id, dd, isAdd, null, true);temp[val] = 1;} else {var name = common.valToName(id, val);if(name) {common.handlerLabel(id, dd, isAdd, common.getItem(id, val), true);temp[val] = 1;}}}});}};Select4.prototype.on = function(id, fun, isEnd) {common.bindEvent(isEnd ? 'endOn' : 'on', id, fun);return this;};Select4.prototype.filter = function(id, fun) {common.bindEvent('filter', id, fun);return this;};Select4.prototype.maxTips = function(id, fun) {common.bindEvent('maxTips', id, fun);return this;};Select4.prototype.opened = function(id, fun) {common.bindEvent('opened', id, fun);return this;};Select4.prototype.closed = function(id, fun) {common.bindEvent('closed', id, fun);return this;};Select4.prototype.config = function(id, config, isJson) {if(id && (typeof id === 'undefined' ? 'undefined' : _typeof(id)) == 'object') {isJson = config == true;config = id;id = null;}if(config && (typeof config === 'undefined' ? 'undefined' : _typeof(config)) == 'object') {if(isJson) {config.header || (config.header = {});config.header['Content-Type'] = 'application/json; charset=UTF-8';config.dataType = 'json';}id ? (ajaxs[id] = $.extend(true, {}, ajaxs[id] || ajax, config), !common.check(id) && this.render(id), data[id] && config.direction && (data[id].config.direction = config.direction), data[id] && config.clearInput && (data[id].config.clearInput = true), config.searchUrl && data[id] && common.triggerSearch($('.' + PNAME + ' dl[xid="' + id + '"]').parents('.' + FORM_SELECT), true)) : ($.extend(true, ajax, config), $.each(ajaxs, function(key, item) {$.extend(true, item, config);}));}return this;};Select4.prototype.render = function(id, options) {var _ref2;if(id && (typeof id === 'undefined' ? 'undefined' : _typeof(id)) == 'object') {options = id;id = null;}var config = options ? (_ref2 = {init: options.init,disabled: options.disabled,max: options.max,isSearch: options.isSearch,searchUrl: options.searchUrl,isCreate: options.isCreate,radio: options.radio,skin: options.skin,direction: options.direction,height: options.height,formname: options.formname,layverify: options.layverify,layverType: options.layverType,showCount: options.showCount,placeholder: options.placeholder,create: options.create,filter: options.filter,maxTips: options.maxTips,on: options.on}, _defineProperty(_ref2, 'on', options.on), _defineProperty(_ref2, 'opened', options.opened), _defineProperty(_ref2, 'closed', options.closed), _defineProperty(_ref2, 'template', options.template), _defineProperty(_ref2, 'clearInput', options.clearInput), _ref2) : {};options && options.searchType != undefined && (config.searchType = options.searchType == 'dl' ? 1 : 0);if(id) {fsConfigs[id] = {};$.extend(fsConfigs[id], data[id] ? data[id].config : {}, config);} else {$.extend(fsConfig, config);}($('select[' + NAME + '="' + id + '"]')[0] ? $('select[' + NAME + '="' + id + '"]') : $('select[' + NAME + ']')).each(function(index, select) {var sid = select.getAttribute(NAME);common.render(sid, select);setTimeout(function() {return common.setHidnVal(sid, $('select[xm-select="' + sid + '"] + div.' + PNAME + ' .' + LABEL));}, 10);});return this;};Select4.prototype.disabled = function(id) {var target = {};id ? common.check(id) && (target[id] = data[id]) : target = data;$.each(target, function(key, val) {$('dl[xid="' + key + '"]').prev().addClass(DIS);});return this;};Select4.prototype.undisabled = function(id) {var target = {};id ? common.check(id) && (target[id] = data[id]) : target = data;$.each(target, function(key, val) {$('dl[xid="' + key + '"]').prev().removeClass(DIS);});return this;};Select4.prototype.data = function(id, type, config) {if(!id || !type || !config) {common.log('id: ' + id + ' param error !!!');return this;}if(!common.check(id)) {common.log('id: ' + id + ' not render !!!');return this;}this.value(id, []);this.config(id, config);if(type == 'local') {common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');} else if(type == 'server') {common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100');}return this;};Select4.prototype.btns = function(id, btns, config) {if(id && common.isArray(id)) {btns = id;id = null;}if(!btns || !common.isArray(btns)) {return this;};var target = {};id ? common.check(id) && (target[id] = data[id]) : target = data;btns = btns.map(function(obj) {if(typeof obj == 'string') {if(obj == 'select') {return quickBtns[0];}if(obj == 'remove') {return quickBtns[1];}if(obj == 'reverse') {return quickBtns[2];}if(obj == 'skin') {return quickBtns[3];}}return obj;});$.each(target, function(key, val) {val.config.btns = btns;var dd = $('dl[xid="' + key + '"]').find('.' + FORM_SELECT_TIPS + ':first');if(btns.length) {var show = config && config.show && (config.show == 'name' || config.show == 'icon') ? config.show : '';var html = common.renderBtns(key, show, config && config.space ? config.space : '30px');dd.html(html);} else {var pcInput = dd.parents('.' + FORM_SELECT).find('.' + TDIV + ' input');var _html = pcInput.attr('placeholder') || pcInput.attr('back');dd.html(_html);dd.removeAttr('style');}});return this;};Select4.prototype.search = function(id, val) {if(id && common.check(id)) {ajaxs[id] = $.extend(true, {}, ajaxs[id] || ajax, {first: true,searchVal: val});common.triggerSearch($('dl[xid="' + id + '"]').parents('.' + FORM_SELECT), true);}return this;};Select4.prototype.replace = function(id, type, config) {var _this17 = this;if(!id || !type || !config) {common.log('id: ' + id + ' param error !!!');return this;}if(!common.check(id, true)) {common.log('id: ' + id + ' not render !!!');return this;}var oldVals = this.value(id, 'val');this.value(id, []);this.config(id, config);if(type == 'local') {common.renderData(id, config.arr, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100', false, true);this.value(id, oldVals, true);} else if(type == 'server') {common.ajax(id, config.url, config.keyword, config.linkage == true, config.linkageWidth ? config.linkageWidth : '100', false, function(id) {_this17.value(id, oldVals, true);}, true);}};return new Select4();
});

自己修改的样式:ledformSelects-v4.css

@CHARSET "UTF-8";/* formSelects澶氶�塩ss */
select[xm-select]{display: none !important;}
.xm-select-parent * {margin: 0;padding: 0;font-family: "Helvetica Neue", Helvetica, "PingFang SC", 寰蒋闆呴粦, Tahoma, Arial, sans-serif; box-sizing: initial;}
.xm-select-parent {text-align: left;}
.xm-select-parent select {display: none;}
.xm-select-parent .xm-select-title {position: relative;}
.xm-select-parent .xm-input {cursor: pointer;border-radius: 2px;border-width: 1px;border-style: solid;border-color: #E6E6E6;display: block;width: 9.43vw;box-sizing: border-box;height: 3.9vh;line-height: 1.3;padding-left: 10px;outline: 0}
.xm-select-parent .xm-input::-webkit-input-placeholder { color:#CCCCCC; }
.xm-select-parent .xm-input::-moz-placeholder { color:#CCCCCC; } /* firefox 19+ */
.xm-select-parent .xm-input:-ms-input-placeholder { color:#CCCCCC; } /* ie */
.xm-select-parent .xm-input:-moz-placeholder { color:#CCCCCC; }
.xm-select-parent .xm-select-sj {display: inline-block;width: 0;height: 0;border-style: dashed;border-color: transparent;overflow: hidden;position: absolute;right: 10px;top: 50%;margin-top: -3px;cursor: pointer;border-width: 6px;border-top-color: #66C0FF;border-top-style: solid;transition: all .3s;-webkit-transition: all .3s}
.xm-select-parent .xm-form-selected .xm-select-sj {margin-top: -9px;transform: rotate(180deg);-webkit-transform: rotate(180deg)}
.xm-select-parent .xm-form-select dl {display: none;position: absolute;left: 0;top: 42px;padding: 5px 0;z-index: 999;min-width: 100%;border: 1px solid #d2d2d2;max-height: 300px;overflow-y: auto;background-color: #fff;border-radius: 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12);box-sizing: border-box;animation-fill-mode: both;-webkit-animation-name: layui-upbit;animation-name: layui-upbit;-webkit-animation-duration: .3s;animation-duration: .3s;-webkit-animation-fill-mode: both;animation-fill-mode: both}
@-webkit-keyframes layui-upbit {from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3}to {-webkit-transform: translate3d(0, 0, 0);opacity: 1}
}
@keyframes layui-upbit {from {transform: translate3d(0, 30px, 0);opacity: .3}to {transform: translate3d(0, 0, 0);opacity: 1}
}
.xm-select-parent .xm-form-selected dl {display: block}
.xm-select-parent .xm-form-select dl dd,.xm-select-parent .xm-form-select dl dt {padding: 0 10px;line-height: 3.9vh;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.xm-select-parent .xm-form-select dl dd {cursor: pointer;height: 3.9vh;}
.xm-select-parent .xm-form-select dl dd:hover {background-color: rgba(0, 46, 115, 1)}
.xm-select-parent .xm-form-select dl dt {font-size: 12px;color: #999}
.layui-select-disabled .xm-dis-disabled {border-color: #eee!important}
.xm-select-parent .xm-form-select dl .xm-select-tips {padding-left: 10px!important;color: #999;font-size: 0.52vw}
.xm-unselect {-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none}.xm-form-checkbox {position: relative;display: block;vertical-align: middle;cursor: pointer;font-size: 0;-webkit-transition: .1s linear;transition: .1s linear;box-sizing: border-box;height: auto!important;line-height: normal!important;border: none!important;margin-right: 0;padding-right: 0;background: 0 0;}
.xm-form-checkbox > i {color: #FFF; font-size: 16px; width: 16px; height: 16px; position: absolute; top: 9px; border: 1px solid #5FB878; border-radius: 3px; z-index: 2;}
.xm-form-checkbox:hover > i {border-color: #5FB878;}
.xm-form-checkbox > span{display: block;position: relative;padding: 0 15px 0 30px;height: 100%;font-size: 0.52vw;border-radius: 2px 0 0 2px;background-color: #d2d2d2;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: 0 0;color: #81ADFFFF;line-height: 3.9vh;}.xm-select-parent dl{width: 100%;}
.xm-select-parent dl dd{position: relative;}
.xm-select-parent dl dd > i:not(.icon-sousuo){position: absolute; right: 10px; top: 0; color: #AAAAAA;}
.xm-select-parent dl dd.xm-select-this div > i{color: #009688; font-size: 18px;}
.xm-select-parent dl dd.xm-select-this div > i:after{content: '\e613';}
.xm-select-parent dl dd.xm-dis-disabled div i {border-color: #C2C2C2;}
.xm-select-parent dl dd.xm-dis-disabled.xm-select-this div i {color: #C2C2C2;}
.xm-select-radio div.xm-form-checkbox > i {border-radius: 20px;}
/*.xm-select-parent dl.xm-select-radio dd.xm-select-this div i:after{content: '\e62b';}*/
.xm-select-parent dl.xm-select-radio dd.xm-select-this div i:after{}
.xm-dis-disabled,.xm-dis-disabled:hover {cursor: not-allowed!important}
.xm-form-select dl dd.xm-dis-disabled {background-color: #fff!important}
.xm-form-select dl dd.xm-dis-disabled span {color: #C2C2C2}
.xm-form-select dl dd.xm-dis-disabled .xm-icon-yes {border-color: #C2C2C2}
.xm-select-parent {position: relative;-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none}
.xm-select-parent .xm-select {border: 1px solid rgba(102, 192, 255, 0.4);line-height: normal;height: auto;padding: 4px 10px 1px 10px;overflow: hidden;min-height: 3.9vh;left: 0;z-index: 99;position: absolute;background: 0 0;padding-right: 20px}
.xm-select-parent .xm-select:hover {border-color: rgba(102, 192, 255, 0.8)}
.xm-select-parent .xm-select .xm-select-label {display: inline-block;margin: 0;vertical-align: middle}
.xm-select-parent .xm-select-title div.xm-select-label>span {position: relative;padding: 2px 5px;background-color: #295E9B;border-radius: 2px;color: #81ADFFFF;display: inline-block;line-height: 18px;height: 18px;margin: 2px 5px 2px 0;cursor: initial;user-select: none;font-size: 0.52vw;padding-right: 25px;-webkit-user-select: none;}
.xm-select-parent .xm-select-title div.xm-select-label>span i {position: absolute; margin-left: 8px; font-size: 12px; cursor: pointer; line-height: 20px;}
.xm-select-parent .xm-select .xm-select-input {height: 28px;background-color: transparent;padding: 0;vertical-align: middle;display: inline-block;width: 50px}
.xm-select-parent .xm-select--suffix input {border: none}
.xm-form-selected .xm-select,.xm-form-selected .xm-select:hover {border-color: rgba(102, 192, 255, 0.8)!important}
.xm-select--suffix+div {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: #295E9B;color: #FFFFFF;border-color: rgba(102, 192, 255, 0.4);z-index: -1;}
.xm-select-dis .xm-select--suffix+div {z-index: 100;cursor: no-drop!important;opacity: .2;background-color: #FFF;}
.xm-select-disabled,.xm-select-disabled:hover {color: #d2d2d2!important;cursor: not-allowed!important;background-color: #fff}
.xm-select-none {display: none;margin: 5px 0;text-align: center;}
.xm-select-none:hover {background-color: #FFF!important}
.xm-select-empty {display: block}
.xm-span-hide {display: none!important;}
.layui-form-pane .xm-select,.layui-form-pane .xm-select:hover {top: 0px;border-radius: 0.25rem;}
.layui-form-pane .xm-select-title {height:3.9vh;}
.xm-select-hide {display: none !important;}
div[xm-hg] .xm-select-label{white-space: nowrap; overflow: hidden; position: absolute; right: 30px; left: 0; padding-left: 10px;}/* 棰滆壊鐩稿叧 */
div[xm-select-skin] .xm-select-title div.xm-select-label>span {margin-left: 0.3vw;margin-top: 0.3vh;}
div[xm-select-skin] .xm-select-title div.xm-select-label>span i:hover {opacity: .8;filter: alpha(opacity=80);cursor: pointer}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span {background-color: #F0F2F5;color: #909399;border: 1px solid #F0F2F5}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i {color: #C0C4CC}
div[xm-select-skin=default] .xm-select-title div.xm-select-label>span i:before {content: '\e60b'; font-size: 16px; margin-left: -3px;}
div[xm-select-skin=default] dl dd:not(.xm-dis-disabled) i {border-color: #5FB878}
div[xm-select-skin=default] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #5FB878}
div[xm-select-skin=default].xm-form-selected .xm-select,div[xm-select-skin=default].xm-form-selected .xm-select:hover {border-color: #C0C4CC!important}
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span {background-color: #009688;color: #FFF;border: 1px solid #009688}
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i {background-color: #009688; color: #FFF}
div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i {border-color: #009688}
div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #009688}
div[xm-select-skin=primary].xm-form-selected .xm-select,div[xm-select-skin=primary].xm-form-selected .xm-select:hover {border-color: #009688!important}
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span {background-color: #1E9FFF;color: #FFF;border: 1px solid #1E9FFF}
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i {background-color: #1E9FFF;color: #FFF}
div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i {border-color: #1E9FFF}
div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #1E9FFF}
div[xm-select-skin=normal].xm-form-selected .xm-select,div[xm-select-skin=normal].xm-form-selected .xm-select:hover {border-color: #1E9FFF!important}
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span {background-color: #FFB800;color: #FFF;border: 1px solid #FFB800}
div[xm-select-skin=warm] .xm-select-title div.xm-select-label>span i {background-color: #FFB800;color: #FFF}
div[xm-select-skin=warm] dl dd:not(.xm-dis-disabled) i {border-color: #FFB800}
div[xm-select-skin=warm] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FFB800}
div[xm-select-skin=warm].xm-form-selected .xm-select,div[xm-select-skin=warm].xm-form-selected .xm-select:hover {border-color: #FFB800!important}
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span {background-color: #FF5722;color: #FFF;border: 1px solid #FF5722}
div[xm-select-skin=danger] .xm-select-title div.xm-select-label>span i {background-color: #FF5722;color: #FFF}
div[xm-select-skin=danger] dl dd:not(.xm-dis-disabled) i {border-color: #FF5722}
div[xm-select-skin=danger] dl dd.xm-select-this:not(.xm-dis-disabled) i {color: #FF5722}
div[xm-select-skin=danger].xm-form-selected .xm-select,div[xm-select-skin=danger].xm-form-selected .xm-select:hover {border-color: #FF5722!important}/* 澶氶�夎仈鍔�  */
.xm-select-parent .layui-form-danger+.xm-select-title .xm-select {border-color: #FF5722 !important;}
.xm-select-linkage li {padding: 10px 0px;cursor: pointer;}
.xm-select-linkage li span {padding-left: 20px;padding-right: 30px;display: inline-block;height: 20px;overflow: hidden;text-overflow: ellipsis;}
.xm-select-linkage li.xm-select-this span {border-left: 5px solid #009688;color: #009688;padding-left: 15px;}
.xm-select-linkage-group {position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow-x: hidden;overflow-y: auto;}
.xm-select-linkage-group li:hover {border-left: 1px solid #009688;}
.xm-select-linkage-group li:hover span {padding-left: 19px;}
.xm-select-linkage-group li.xm-select-this:hover span {padding-left: 15px;border-left-width: 4px;}
.xm-select-linkage-group:nth-child(4n+1){background-color: #EFEFEF; left: 0;}
.xm-select-linkage-group:nth-child(4n+1) li.xm-select-active{background-color: #F5F5F5;}
.xm-select-linkage-group:nth-child(4n+2){background-color: #F5F5F5; left: 100px;}
.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FAFAFA;}
.xm-select-linkage-group:nth-child(4n+3){background-color: #FAFAFA; left: 200px;}
.xm-select-linkage-group:nth-child(4n+3) li.xm-select-active{background-color: #FFFFFF;}
.xm-select-linkage-group:nth-child(4n+4){background-color: #FFFFFF; left: 300px;}
.xm-select-linkage-group:nth-child(4n+4) li.xm-select-active{background-color: #EFEFEF;}
.xm-select-linkage li{list-style: none;}
.xm-select-linkage-hide {display: none;}
.xm-select-linkage-show {display: block;}div[xm-select-skin='default'] .xm-select-linkage li.xm-select-this span {border-left-color: #5FB878;color: #5FB878;}
div[xm-select-skin='default'] .xm-select-linkage-group li:hover {border-left-color: #5FB878;}
div[xm-select-skin='primary'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;}
div[xm-select-skin='primary'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;}
div[xm-select-skin='normal'] .xm-select-linkage li.xm-select-this span {border-left-color: #1E9FFF;color: #1E9FFF;}
div[xm-select-skin='normal'] .xm-select-linkage-group li:hover {border-left-color: #1E9FFF;}
div[xm-select-skin='warm'] .xm-select-linkage li.xm-select-this span {border-left-color: #FFB800;color: #FFB800;}
div[xm-select-skin='warm'] .xm-select-linkage-group li:hover {border-left-color: #FFB800;}
div[xm-select-skin='danger'] .xm-select-linkage li.xm-select-this span {border-left-color: #FF5722;color: #FF5722;}
div[xm-select-skin='danger'] .xm-select-linkage-group li:hover {border-left-color: #FF5722;}/* 蹇嵎鎿嶄綔 */
.xm-select-tips[style]:hover{background-color: #FFF!important;}
.xm-select-parent dd > .xm-cz{position: absolute; top: 0px; right: 10px;}
.xm-select-parent dd > .xm-cz-group{margin-right: 30px; border-right: 2px solid #ddd; height: 16px; margin-top: 10px; line-height: 16px; overflow: hidden;}
.xm-select-parent dd > .xm-cz-group .xm-cz{display: inline-block; margin-right: 30px;}
.xm-select-parent dd > .xm-cz-group .xm-cz i{margin-right: 10px;}
.xm-select-parent dd > .xm-cz-group[show='name'] .xm-cz i{display: none;}
.xm-select-parent dd > .xm-cz-group[show='icon'] .xm-cz span{display: none;}
.xm-select-parent dd .xm-cz:hover{color: #009688;}
div[xm-select-skin='default'] dd .xm-cz:hover{color: #C0C4CC;}
div[xm-select-skin='primary'] dd .xm-cz:hover{color: #009688;}
div[xm-select-skin='normal'] dd .xm-cz:hover{color: #1E9FFF;}
div[xm-select-skin='warm'] dd .xm-cz:hover{color: #FFB800;}
div[xm-select-skin='danger'] dd .xm-cz:hover{color: #FF5722;}/* 涓嬫媺閲岄潰鐨勬悳绱� */
.xm-select-tips .xm-input{border: none; border-bottom: 1px solid #E6E6E6; padding-left: 27px;}
.xm-select-tips .icon-sousuo{position: absolute;}
.xm-select-tips.xm-dl-input{display: none;}
div[xm-select-search-type="1"] .xm-select-tips.xm-dl-input{display: block;}
div[xm-select-search-type="1"] .xm-select .xm-select-input{display: none !important;}/* 闃块噷宸村反鐭㈤噺鍥炬爣搴� */
@font-face {font-family: "xm-iconfont";src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831'); /* IE9*/src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAsYAAsAAAAAEQwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8ukovY21hcAAAAYAAAACrAAACPBtV6wxnbHlmAAACLAAABnEAAAmMovtEvWhlYWQAAAigAAAAMQAAADYSctBCaGhlYQAACNQAAAAgAAAAJAgBA69obXR4AAAI9AAAABsAAAAwMCX//WxvY2EAAAkQAAAAGgAAABoN8gwubWF4cAAACSwAAAAeAAAAIAEiAM9uYW1lAAAJTAAAAUUAAAJtPlT+fXBvc3QAAAqUAAAAhAAAALJ1LunfeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWacwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMbwwZ27438AQw9zMcAQozAiSAwDk4AxmeJzlks0JwzAMhZ8bN/1xD4GU0h2Se26BbJMJOkkn6KmTPbJF8mT5UGg3qMRn0EPIRs8A9gAq0YsIhDcCLF5SQ9YrnLMe8VB9RSMlMjCxYcueIyfOy7CuAFHU7lP9iqApt5L3ksBJbzlgZ9PVkXDUvbWa6x8T/i0u+XyWKtmmHW0NDI55yeRok2DjaKdg65jX7Bzzm71jXnN08vzJkQvg7Ng/WAYH9Qb3wzM/AHicjVVvbFzFEd/Zfbv7/vn9uXf33vl8Pt/dO99BHOzEZ9/DKTImRS0KjUoLDUFCjtpCMGkT1D9qldQmhkiUSv2G1BBB1VYqilGREOIDViWEGzttqkpI/cAXqyL5gFRALVIF+VCJe9fZd+fEpR/o6d3s7G9mZ2dmZ3aJIKR3h0ZYmVgkIjGZJV8mDxECtenOTDOu1UU+hJoD+TCqzcNMk2V8O5OCbDVRPgZhEt4JCNTZ/4HA3+DfuWIxl8pcFFErG3K7oD7fvev8UaMUmEu259lrRjBsfs6cLhYbRfzSbSjGRVAkfQYihUXsyPkHTVyyZDNmXzSHg3Tl+aPKxpJFqbWGdtLl8w8iYDxuDTQIx7yc1YCdIx7Jk3HSwbwQwGBcyMKZVtG0ZCuJxjFJBb+foMSfhJaPOSr4FYgwSwqIx2MHJALtAdBi/7xcSMJL+fxmmBS2guD61tZm96X02mgcj0J1NAaIR9UMmhXIV24FuLUC71+r1AEmK1AYrQHUK/Tly/m8MrOZz2+FSf7jzc3NK9XR9F2lVq+gmRp0r+HK9B+VJmR263Rgd7ALwR/FOFfx/FeJS0YxQh9drakgMJhaBVizkwgqWxLD6eQ0Qo8f7p44fJziSH9x+PjLZUO+/jZ9+K35X37ljn/Rv+yW4Ziuf2nl4PfS5/LrP47OHTsFJULYjf369UZAEBmSqEOSJmG4Me6LeznA0BFkcDoJlGynVzmH2vY21DhPr25v9DjvbfTp2TXG1s5mlK0q4S7lT++6obbRox/s6CHF2LMEsHvoFfSFQIKnKQMZJVFCD6WH0p0PVvvcRx8uph8eUks0jOFNtskOkpDsJ18k9+NqVRg3qqMCSSerjyRuYUi1/vFH7YIqikGVcD+ehFl/pqPSPKZ6DG6mHisljFhBFvU/PoRkSNd/JHO6Ja5JOXcfwIGJbm/igBq/hn8Kfb57YbYUxyX4cwkLKH1u4gD9GVSL6USxCjjCO2p8VdcvH9XRYIQWqUblu3pR/v2BvXMAc3tTmJiDAQ895B9NL0C9BFdKqqRKczDX/Whg7O1irVbcqZ8/sbfYBOZwihC+6wSDzszUf+dF7rRO1O+fKaDO+nXOr6+vf8L5J44Qe4UvnlyRntwrxMoKzpFdeRJBNb9dGyiur1+nE59R+uwi9M1G395jb9KP0bcK2YM9nJB5cojcS75OFskxclzdc+pW699z8iYbtf14BGKf77ruZNyXKC0e50OEBI+V/Aug5Dex/9WjJfipuqnS00gfybjXbNe1f762tXmRPp3Bdl/l6g5JXyqXR0bK8J3PR+jvwYs8/GBnTM+kr8FX4ZknwC16XtG9iH9QfNn1vDHPe2GAj3ieV3XdF2+IPdeteh62Ra+HfQrsKWKSBtlHSOBgM7KkKQBLWnZoq1mVwotCLRGhOtSkMzMuqq2ml3SqUehdnZtynbtPLB88/Dy9dDrYVzoy/MTT6Svnlpd/AHueon5wpnGsEae/PZm+d3Jp6SSUTy7R3xw4f9/B5RN3O+5t3VNncjm6Cnt+uLx8DpedGj4yvD84HceNxTcG6ku4VPmZ9n6nNdj95BHyB3IJKxBPsKm6rpn4QopmqzlFm1MwqdxO5rPGnIc7aSfCGg1Vqyo6nUlQhnh7WiFhXzgGhVC4qjPRki9xdGCc4zXeSWb9BG1ktlqz2Q5Y7S2sIJfivkpVKCCDpyCWdbQzECj76qMVqvyJ/LxyI2rTv1bTC25lSM9xAUJ4Lc+U0wXTsKXDmaA8tHX+hvDt4Wa9IHLcMUBz9VwpL4xi2aGasAPPKNUbbmD/2jAtk0uXY4eJx8zRgj9iAnVNt5X+BL5vlHTOaiOmG7g6+7ZBNUOaefNXuJF3u25RjVvBLeW8E4wV7ZJBpbAXXGnqrwgupWVTAKqZjq5HbW44fMguNJhgwmw8oOk8GCqE8F3GhLB0uS/UDVt4lgjtqGxK/rpwuaDAqKHZNuWmJjVKuWUxbpg2B9DtoRdN3TKF9B0hw4p41C5i3CI9w4civP3aQLlmLMK3wpJpaI7BvmlhPtH3nPWCKQAdE2hK9zyuUeAm921qCA2kvqY8N1yDMq4beJlG+4XQqHDCQnqPlJIyyN579S4tIGcRv/82BbFfK9SgnVHkZzMeaSQjqR5/fP5XF2Chh+sW0g0gn27snqXv3/bsszsfJbCAIiTdjRTVCBL6jV0K5D8H/8xVAAAAeJxjYGRgYADi16c/vIvnt/nKwM3CAALXZxxzhtH///23YVFhbgZyORiYQKIAm34OJQAAAHicY2BkYGBu+N/AEMOi/P/f//8sKgxAERTAAwCmuAa3eJxjYWBgYAFhRiiNFf//z6L8/x+IDQAkCQRQAAAAAAAAjAEAATgBfgGaAiACbgMMA2AEhATGAAB4nGNgZGBg4GE4DMQgwATEXEDIwPAfzGcAAB2tAfIAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG2L3QqCQBCFZ9RWU7sOfAeh8IFi3N10EHYUG1p8+gSjqz44F+cPEjgo4T81Jphihic0mGOBZyyxwhovUCxKIe4ylthRuDqV+I22UcLQ6+QH4ubWdZZkU3m4o/0tUqtSvT33TPLits12fzc+zhRcvoquo0o281OLhcMw7Q+AD8sULE0=') format('woff'),url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg'); /* iOS 4.1- */
}
.xm-iconfont {font-family:"xm-iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.icon-quanxuan:before { content: "\e62c"; }
.icon-caidan:before { content: "\e610"; }
.icon-fanxuan:before { content: "\e837"; }
.icon-pifu:before { content: "\e668"; }
.icon-qingkong:before { content: "\e63e"; }
.icon-sousuo:before { content: "\e600"; }
.icon-danx:before { content: "\e62b"; }
.icon-duox:before { content: "\e613"; }
.icon-close:before { content: "\e601"; }
.icon-expand:before { content: "\e641"; }

好用的下拉选框（单选，多选，全选，清空和反选，及个种样式）----个人钟爱相关推荐

1. Android点击事件、下拉菜单、单选框实例

   Android点击事件.下拉菜单.单选框实例 点击事件 1.ClickActivity.java import android.app.Activity; import android.os.Bund ...

2. js下拉 selenium_selenium的下拉选择框

   今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

3. eazy ui 复选框单选_UI备忘单：单选按钮，复选框和其他选择器

   eazy ui 复选框单选 重点 (Top highlight) Pick me! Pick me! No, pick me! In today's cheat sheet we will be lo ...

4. 下拉选择框 其他_列表框 vs 下拉列表，哪个更好？

   许多UI控件允许用户选择选项,它们包括复选框.单选按钮.切换开关.步进器.列表框和下拉列表. 在本文中,作者对列表框和下拉列表进行了定义,讨论何时使用各个元素,以及各个情况下使用哪一种更加合适. 摘要 ...

5. [CSS]复选框单选框与文字对齐问题的研究与解决.

   前言: 今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下.  原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文 ...

6. ylbtech-数据库设计与优化-对作为复选框/单选列表的集合表的设计

   ylbtech-DatabaseDesgin:ylbtech-数据库设计与优化-对作为复选框/单选列表的集合表的设计 -- DatabaseName:通用表结构 -- -- 主要是针对将要设计的表对象 ...

7. layui下拉选择框开启搜索功能后，文本框会将Nbsp显示出来的解决办法

   layui下拉选择框直接在select标签添加lay-search,即可开启搜索功能 <select id="selectCategory" lay-filter=" ...

8. axure实现搜索功能_Axure案例：电商网站下拉搜索框的制作

   Axure案例应用 电商网站的搜索框,对商品.店铺和卖家进行搜索.切换下拉框中的内容时,切换到不同的搜索输入框,样式也相应改变,下面通过设置下拉列表框"选中项于"逻辑条件,实现上述 ...

9. duilib可编辑下拉选择框

   标题duilib ComboEdit 可编辑下拉选择框 可编辑下拉选择框,输入文本后,下拉选择框会自动显示相关的选项: 自己根据EditUI.ComboUI.ListUI自己弄出来的: 缺陷: 当窗口 ...

10. 类似QQ登陆界面保存密码和账号下拉选择框

    本界面的效果 需要的知识 PopupWindon ListView的内部响应事件 分析 步骤 ListView PopupWindow 点击事件 用户信息存储 GSON 的用法 实施方案 情况一 情况 ...

最新文章

1. 利用NVIDIA NGC的TensorRT容器优化和加速人工智能推理
2. 【读书笔记】iOS-NSString的length
3. js 字符和html和数值拼接,js中substring和substr的用法(获取字符串为整个html页面中的某个数值)...
4. MapObjects2自带例子的问题
5. 在macOS X中gdb的codesigned问题解决
6. c#常用类库----计算机信息类
7. Java生产环境下性能监控与调优详解 第5章 Tomcat性能监控与调优
8. openstack 功能_OpenStack Ocata的新功能
9. flash游戏代码_Flash正式宣告死亡，4399游戏还能玩么——从没有所谓的千秋万代...
10. IGP-LAB-EIGRP-1
11. python入侵网站_入侵服务器简介_python信息安全实战_Python视频-51CTO学院
12. 虚拟机win7系统安装vmtool
13. Windows 语音引擎TTS修复
14. java 九九乘法表 99乘法表
15. 移动互联网技术(wifi)
16. MATLAB---制作动画并演示
17. 特惠快车和快车的区别，滴滴特惠快车老司机说了实话？
18. 五分钟学会python函数_Python——带你五分钟了解函数式编程与闭包
19. 多种方式解决Java控制台报错 java.util.LinkedHashMap cannot be cast to.....
20. MATLAB下载github仓库

热门文章

1. 神经网络迭代次数的一个近似关系
2. 【分享】java开发框架低代码平台介绍
3. python 绘制简单的图形
4. 冷藏温度范围_冰箱冷冻室温度范围一般是多少
5. 从Big Dog到Spot Mini:波士顿动力「四足机器人」进化史概览
6. 解决win7无法安装手机MTP驱动
7. 桌子做3D建模需要多长时间？
8. 正经科普:DDos高防ip详解
9. 社区分享丨微拍堂通过JumpServer统一管控云上资产
10. 编辑一个用于迭代法的计算器