下载 js 和 css 分别放在 layui/lay/modules 下 , layui/css/modules formSelects-v4 下

html

<div><select name="province" id="province" class="form-control"><option value="100000">全国</option><volist name="province_list" id="vo"><option value="{$vo.value}">{$vo.name}</option></volist></select> <input id="sub" type="checkbox" checked="checked"> <span class="sub-label">显示到县级</span><input id="short_name" type="checkbox" checked="checked"> <span class="sub-label">去掉 （县 /区 后缀）</span><span>已选中：<em  id="counts">0</em> 个</span></div><div class="layui-form"><select name="city" xm-select="example6_4" xm-select-search=""><option value="">点击选取地名</option></select></div>

js

   	    //全局定义一次, 加载formSelectslayui.config({base: "__PUBLIC__/js/layui2/lay/modules/" //此处路径请自行处理, 可以使用绝对路径}).extend({formSelects: 'formSelects-v4'});//加载模块layui.use(['jquery', 'formSelects'], function(){var formSelects = layui.formSelects;   formSelects.value('example6_4', 'all'); $("#province").change(function(){var province_id = $('#province').val();    	        	var type =0;if($("#sub").is(':checked')){  type =1;}var is_short = '0';if($("#short_name").is(':checked')){  is_short = '1';}			 formSelects.config('example6_4', {type: 'post',				//请求方式: post, get, put, delete...header: {},					//自定义请求头data: {'type':type,'short':is_short},					//自定义除搜索内容外的其他数据searchUrl: '{:U('user/task/getListOfCity')}',				//搜索地址, 默认使用xm-select-search的值, 此参数优先级高searchName: 'keyword',		//自定义搜索内容的key值searchVal: province_id,				//自定义搜索内容, 搜素一次后失效, 优先级高于搜索框中的值keyName: 'name',			//自定义返回数据中name的key, 默认 namekeyVal: 'value',			//自定义返回数据中value的key, 默认 valueshortNa: 'short_name',			//自定义返回数据中name的key, 默认 namekeySel: 'selected',			//自定义返回数据中selected的key, 默认 selectedkeyDis: 'disabled',			//自定义返回数据中disabled的key, 默认 disabledkeyChildren: 'children',	//联动多选自定义childrendelay: 500,					//搜索延迟时间, 默认停止输入500ms后开始搜索direction: 'down',			//多选下拉方向, auto|up|downlinkage: true,linkageWidth: 130,clearInput: false, 			//当有搜索内容时, 点击选项是否清空搜索内容, 默认不清空}, true);$("#counts").text(formSelects.value('example6_4', 'name').length);});formSelects.on('example6_4', function(id, vals, val, isAdd, isDisabled){$("#counts").text(formSelects.value('example6_4', 'name').length);});//取值选中 城市$(".city_select").on("click",function() {var a = formSelects.value('example6_4', 'name'); b = a.length;if (0 >= b) {Wind.use('artDialog',function(){art.dialog({id : "alert",icon : "error",content : "请至少选择一个地区",ok : function() {}});});}else {    var thisCitys = formSelects.value('example6_4', 'name'); var d="";var new_arr = []; 					for (var f = 0; f < thisCitys.length; f++) {                	 if($.inArray(thisCitys[f],new_arr)==-1) {  new_arr.push(thisCitys[f]); }}//去重for(var i=0;i<new_arr.length; i++){d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])}$("#area").val(d);$('#myModal').modal("toggle");$(".modal-backdrop").remove();lineTotal('#area');}});//城市追加$(".city_append").on("click",function() {var a = formSelects.value('example6_4', 'name'); b = a.length;if (0 >= b) {Wind.use('artDialog',function(){art.dialog({id : "alert",icon : "error",content : "请至少选择一个地区",ok : function() {}});});}else {var thisCitys = formSelects.value('example6_4', 'name'); var d="";var str = $("#area").val();					var new_arr = str.split('\n'); 					for (var f = 0; f < thisCitys.length; f++) {                	 if($.inArray(thisCitys[f],new_arr)==-1) {  new_arr.push(thisCitys[f]); }}//去重for(var i=0;i<new_arr.length; i++){d = isNull(d) ? new_arr[i] : d + ("\n" + new_arr[i])}// }$("#area").val(d);$('#myModal').modal("toggle");$(".modal-backdrop").remove();lineTotal('#area');}});});