笔记: 一个Layout ui 地区选择实例

html

  <div>
   <link rel="stylesheet" type="text/css" href="__PUBLIC__/js/layui2/css/layui.css" />
   
                            <form class="layui-form layui-form-pane" action="">
                             <div class="layui-form-item" pane="">
                               <div class="layui-input-block">
                               <input  type="checkbox"id="pro"  lay-skin="primary" title="选取省级" checked="checked">
                               <input  type="checkbox"id="city"  lay-skin="primary" title="选取市级" checked="checked">
                                <input  type="checkbox"id="county"  lay-skin="primary" title="选取县级" checked="checked">
                               
                               <input type="checkbox" id="short_name" lay-skin="switch" lay-text="去掉 县 /区 后缀|添加 县 /区 后缀" >
                                <input type="checkbox" class="checkboxAll"   lay-skin="primary" lay-filter="allChoose" title="全选" checked="checked">
                              

                              </div>
                            </div>
								<ul id="province">
								<volist name="province_list" id="vo">
								<li class="tp">
                                  <input type="checkbox" name="check[]" value="{$vo.value}" title="{$vo.name}" lay-filter="oneChoose" checked >
								</li>
								</volist>
								</ul>
                           
                           
                            </form>
						</div>
						
<div class="modal-footer">				
				<button type="button" class="btn btn-primary btn-sm city_append">
					追加地名</button>
				<button type="button" class="btn btn-primary btn-sm city_select">
					选择完毕</button>
</div>

js

<script type="text/javascript" src="__PUBLIC__/js/layui2/layui.js"></script>
 <script type="text/javascript">
   	    //全局定义一次, 加载formSelects
   	    layui.config({
   	    	 base: "__PUBLIC__/js/layui2/lay/modules/" //此处路径请自行处理, 可以使用绝对路径
   	    }).extend({
   	        formSelects: 'formSelects-v4'
   	    });
   	    //加载模块
   	  
   	    
   	    layui.use(['jquery', 'formSelects','form'], function(){
          var form = layui.form;
          var $ = layui.jquery;
          
        //全选
          form.on('checkbox(allChoose)', function (data) {
              $("input[name='check[]']").each(function () {
                  this.checked = data.elem.checked;
              });
              form.render('checkbox');
          });
          //单选
          form.on('checkbox(oneChoose)', function (data) {
              var i = 0;
              var j = 0;
              $("input[name='check[]']").each(function () {
                  if( this.checked === true )
                  {
                      i++;
                  }
                  j++;
              });
              if( i == j )
              {
                  $(".checkboxAll").prop("checked",true);
                  form.render('checkbox');
              }else
              {
                  $(".checkboxAll").removeAttr("checked");
                  form.render('checkbox');
              }

          });
        //选中
          $(".city_select").on("click",function() {
  				var arr = new Array();
  				$("#province :checkbox[checked]").each(function(i){
  					arr[i] = $(this).val();
  				});
  				var vals = arr.join(",");
  				var has_pro = $("#pro").is(':checked')?1:0;
  				var has_city = $("#city").is(':checked')?1:0;
  				var has_county = $("#county").is(':checked')?1:0;
  				var has_end = $("#short_name").is(':checked')?1:0;
  				
  				$.ajax({
  	                url:"{:U('user/task/getListOfCity')}",
  	                type:"post",
  	                data:{provinces:vals,has_pro:has_pro,has_city:has_city,has_county:has_county,end:has_end},
  	                success:function(data){  	                   
  	                    //console.log(data);
  	                  var a = JSON.parse(data);
  	                b = a.length;
  	                if (0 >= b) {
  	                    Wind.use('artDialog',function(){
  	                      art.dialog({
  	                        id : "alert",
  	                        icon : "error",
  	                        content : "请至少选择一个地区",
  	                        ok : function() {}
  	                      });
  	                    });
  	                }else {
  	                        var thisCitys =  JSON.parse(data);
  	    					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');
  	                }  
  	                },
  	                error:function(e){
  	                    alert("错误！！");  	                    
  	                }
  	            });   

          });
          //追加
          $(".city_append").on("click",function() {
  				var arr = new Array();
  				$("#province :checkbox[checked]").each(function(i){
  					arr[i] = $(this).val();
  				});
  				var vals = arr.join(",");
  				var has_pro = $("#pro").is(':checked')?1:0;
  				var has_city = $("#city").is(':checked')?1:0;
  				var has_county = $("#county").is(':checked')?1:0;
  				var has_end = $("#short_name").is(':checked')?1:0;
  				
  				$.ajax({
  	                url:"{:U('user/task/getListOfCity')}",
  	                type:"post",
  	                data:{provinces:vals,has_pro:has_pro,has_city:has_city,has_county:has_county,end:has_end},
  	                success:function(data){  	                   
  	                    //console.log(data);
  	                  var a = JSON.parse(data);
  	                b = a.length;
  	                if (0 >= b) {
  	                    Wind.use('artDialog',function(){
  	                      art.dialog({
  	                        id : "alert",
  	                        icon : "error",
  	                        content : "请至少选择一个地区",
  	                        ok : function() {}
  	                      });
  	                    });
  	                }else {
  	                        var thisCitys =  JSON.parse(data);
  	    					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');
  	                }  
  	                },
  	                error:function(e){
  	                    alert("错误！！");  	                    
  	                }
  	            });   

          });
          
				 
		 
     });
    	    
    	</script>