省市县三级联动逻辑
要实现的效果是: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="width: auto;">大 区:</label> <div class="col-sm-10" style="margin-left: 2.5%;" id="test"> <label class="checkbox pull-left col-xs-2" style="width: 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="width: 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="width: auto;">省/市:</label> <div class="col-sm-10 shengshi sheng" style="margin-left: 2.5%;"> <label class="checkbox pull-left col-xs-2" style="width: 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="width: auto;">市/区:</label> <div class="col-sm-10 shengshi" id="shi" style="margin-left: 2.5%;"> <label class="checkbox pull-left col-xs-2" style="width: 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="width: 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="width: 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="width: 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="width: 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"); })