省市县三级联动逻辑

要实现的效果是: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");
		})

  

原文地址:https://www.cnblogs.com/xuemingyao/p/6823993.html