Layui 的 formSelects-v4 选择框 城市选择使用

下载 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

   	    //全局定义一次, 加载formSelects
   	    layui.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, 默认 name
		 		keyVal: 'value',			//自定义返回数据中value的key, 默认 value
		 		shortNa: 'short_name',			//自定义返回数据中name的key, 默认 name
		 		keySel: 'selected',			//自定义返回数据中selected的key, 默认 selected
		 		keyDis: 'disabled',			//自定义返回数据中disabled的key, 默认 disabled
		 		keyChildren: 'children',	//联动多选自定义children
		 		delay: 500,					//搜索延迟时间, 默认停止输入500ms后开始搜索
		 		direction: 'down',			//多选下拉方向, auto|up|down
		 		linkage: 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');
          }
         	
         });
		 
		 
     });