zoukankan      html  css  js  c++  java
  • 省市县三级联动逻辑

    要实现的效果是:1)点击大区出现对应省市,点击省市出现对应的市区;2)取消大区,对应的省市消失;取消省,对应的市区消失;3)当所有的大区都没有选中时,省市,市区都选项都取消且消失。省市全部取消选项时同理。

    <div class="form-group" id="daqu" style="display: none; background: #f4f4f4; border-top:1px solid #ddd; position: relative; padding-top:30px; 
    padding-bottom: 30px; margin-bottom: 0; top:-2px;">   <div class="form-group">     <label class="col-xs-12 col-sm-3 col-md-1 control-label" style=" auto;">大 区:</label>     <div class="col-sm-10" style="margin-left: 2.5%;" id="test">     <label class="checkbox pull-left col-xs-2" style=" auto"><input name="selecAll0" type="checkbox" value="0" class="all_check" id="check">
    全选 </label>     <volist name="seven" id="vo">     <label class="checkbox pull-left col-xs-2" style=" auto">     <input name="region[]" type="checkbox" value="{$vo.id}" />{$vo.region}     </label>     </volist>   </div> </div>   <div class="form-group none">     <label class="col-xs-12 col-sm-3 col-md-1 control-label" style=" auto;">省/市:</label>     <div class="col-sm-10 shengshi sheng" style="margin-left: 2.5%;">     <label class="checkbox pull-left col-xs-2" style=" auto"><input name="selecAll1" type="checkbox" value="0" class="all_check">全选 </label>   </div>     <div class="zhan"><span class="icon_blue"></span> 展开</div>   </div>   <div class="form-group none">     <label class="col-xs-12 col-sm-3 col-md-1 control-label" style=" auto;">市/区:</label>     <div class="col-sm-10 shengshi" id="shi" style="margin-left: 2.5%;">     <label class="checkbox pull-left col-xs-2" style=" auto"><input name="selecAll2" type="checkbox" value="0" class="all_check">全选</label>   </div>   <div class="zhan"><span class="icon_blue"></span> 展开</div>   </div> </div>

      

    //	//大区选择全选与反选	
    		$("#test input").on("change", function() {
    			var myAttr = $(this).val();
    			if($(this).hasClass("all_check") && $(this).prop("checked")) {
    				$(".sheng").parent().show();
    				$(this).prop("checked", "true");
    				var inputs = $(this).parent().siblings().find("input");
    				inputs.prop("checked", true);
    				setProc(myAttr);
    				$(".sheng").html('<label class="checkbox pull-left col-xs-2" style=" auto"><input name="selecAll1" type="checkbox" value="0" class="all_check">全选 </label>');
    			} else if($(this).is(".all_check")) {
    				$(".sheng").parent().show();
    				$(this).removeAttr("checked");
    				$(this).parent().siblings().find("input").removeAttr("checked");
    				$(".sheng").empty();
    				$(".sheng").parent().hide();
    				$("#shi").empty();
    				$("#shi").parent().hide();
    
    			} else if($(this).prop("checked")) {
    				$(".sheng").parent().show();
    				setProc(myAttr);
    			} else {
    				$(".sheng").parent().show();
    				$(".province" + myAttr + "").remove();
    				if($(".sheng label").length <= 1) {
    					$(".sheng").parent().hide();
    					$("#shi").empty();
    					$("#shi").parent().hide();
    				}
    			}
    		})
    
    		//省填充函数
    		function setProc(sidCon) {
    			$.ajax({
    				type: "get",
    				url: "{:U("getProvince")}",
    				async: true,
    				data: {
    					"sid": sidCon
    				},
    				success: (function(data) {
    					var data = JSON.parse(data);
    					var str = '';
    					$.each(data, function(key, val) {
    						str += '<label class="checkbox pull-left col-xs-2 province' + val.sid + '" style=" auto"><input name="province[]" type="checkbox" value="' + val.id + '">' + val.province + '</label>';
    					});
    					$(".sheng").append(str);
    
    				})
    			});
    		}
    
    		//市填充数据
    		function setCity(myAttr) {
    
    			$.ajax({
    				type: "post",
    				url: '{:U("getCity")}',
    				async: true,
    				data: {
    					"province": myAttr
    				},
    				success: (function(data) {
    					var data = JSON.parse(data);
    					var str = '';
    					$.each(data, function(key, val) {
    						str += '<label class="checkbox pull-left col-xs-2 city' + val.pid + '" style=" auto"><input name="city[]" type="checkbox" value=' + val.id + '>' + val.city + '</label>';
    					});
    					$("#shi").append(str);
    
    				})
    			});
    		}
    
    		//城市判断
    		$(".sheng").on("change", 'input', function() {
    			$("#shi").parent().show();
    			var myAttr = $(this).val();
    
    			if($(this).hasClass("all_check") && $(this).prop("checked")) {
    				$("#shi").parent().show();
    				$(this).prop("checked", "true");
    				var inputs = $(this).parent().siblings().find("input");
    				inputs.prop("checked", true);
    
    				var arr = [];
    				$(this).parent().siblings().each(function() {
    					arr.push($("input", $(this)).val())
    				})
    				
    				setCity(arr.join(","));
    				$("#shi").html('<label class="checkbox pull-left col-xs-2" style=" auto"><input name="selecAll2" type="checkbox" value="0" class="all_check">全选 </label>');
    				
    			} else if($(this).is(".all_check")) {
    				$("#shi").parent().show();
    				$(this).removeAttr("checked");
    				$(this).parent().siblings().find("input").removeAttr("checked");
    				$("#shi").empty();
    				$("#shi").parent().hide();
    
    			} else if($(this).prop("checked")) {
    				setCity(myAttr);
    			} else {
    				$(".city" + myAttr + "").remove();
    				if($("#shi label").length <= 1) {
    					$("#shi").parent().hide();
    				}
    			}
    		})
    
    		$("#shi").on("change", 'input', function() {
    			if($(this).hasClass("all_check") && $(this).prop("checked")) {
    				$("#shi").parent().show();
    				$(this).prop("checked", "true");
    				var inputs = $(this).parent().siblings().find("input");
    				inputs.prop("checked", true);
    
    			} else if($(this).is(".all_check")) {
    				$("#shi").parent().show();
    				$(this).removeAttr("checked");
    				$(this).parent().siblings().find("input").removeAttr("checked");
    			}
    		})
    
    		//	省市关闭,展开
    		$(".zhan").click(function() {
    			$(this).prev().toggleClass("my-height");
    		})
    

      

  • 相关阅读:
    MySQL——事务,索引
    Python——多线程
    Python输入输出
    MySQL与Python的交互——增删改
    MySQL与Python的交互————查询
    Python的学习路
    MySQL数据库
    MySQL条件查询
    设计模式笔记 抽象工厂模式
    设计模式笔记 建造者模式
  • 原文地址:https://www.cnblogs.com/xuemingyao/p/6823993.html
Copyright © 2011-2022 走看看