省份、城市多选

卷毛狒狒 2019-03-23 08:38:34

需要引入jq和下载一个全国城市的json文件
因为我引入的文件的原因，for循环的时候会少一两次，同时最后一个通过城市控制全选全国没做

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>新增方案</title>
<style type="text/css">

.city {
width: 23%;
margin: 2% 5%;
display: inline-block;
}

.childen {
position: fixed;
border: #EDF5FF 1px solid;
border-radius: 0.3125rem;
width: 23rem;
left: 50%;
transform: translate(-50%);
padding: 20px;
background-color: #EDF5FF;
display: none;
}

.childen div {
min-width: 30%;
padding-right: 2%;
display: inline-block;
}

.layui-layer-content {
overflow: hidden !important;
}

/* 地区选择悬停样式 */
.hover {
/* border:#EDF5FF 1px solid; */
height: 19px;
border-radius: 0 0.3125rem 0 0;
position: relative;
z-index: 1000;
background-color: #EDF5FF;
}
#pop{width: 500px;margin: auto;}
</style>
</head>

<body>

<div id="pop">

</div>
<script src="jquery.min.js"></script>
<script>
$("#submit").click(() => {
for (var i = 0; i < editorArr.length; i++) {
contentArr[i] = editorArr[i].txt.html()
}
})

var city; //保存城市

// 加载直辖市和省份
$(function() {
$.ajax({
url: "./city.json",
success: function(msg) {
var str = '<div style="margin:0 5%;"><input type="checkbox" id="all"><label for="all"> 全选</label></div>';
city = msg
for (var i = 0; i < msg.length; i++) {
str += '<div class="city" ><input type="checkbox" class="odd" id="' + msg[i]
.name + '"><label for="' + msg[
i].name + '"> ' + msg[i].name + '</label></div>'
}
$("#pop").html(str)
onloadCity()
},
error: function(a, e) {
alert("系统错误！请联系管理员！");
}
});
}())

//加载城市
function onloadCity() {
for (var i = 0; i < $(".city").length; i++) {
var leng = city[i].sub.length - 1
var cityName = city[i].sub
var child = "<div class='childen'>";
for (var j = 1; j < leng; j++) {
child += '<div ><input type="checkbox" class="selCt" id="' + cityName[j].name + '"><label for="' + cityName[j].name +
'"> ' + cityName[j].name + '</label></div>'
}
child += "<div>"
$(".city").eq(i).append($(child))
}

//全选全不选
$("#all").change(function() {
if (this.checked) {
$(".odd").each(function() {
this.checked = true;
});
$(".selCt").each(function() {
this.checked = true;
});
} else {
$(".odd").each(function() {
this.checked = false;
});
$(".selCt").each(function() {
this.checked = false;
});
}
})
// 反选
$(".odd").change(function() {
var bool;
for (var i = 0; i < $(".odd").length; i++) { //判断是否全部选中
if ($(".odd")[i].checked) {
bool = true;
} else {
bool = false;
break;
}
}
var chi = $(this).parent().children().eq(2).children();
var chilength = chi.length - 1;

// 控制城市的全选
if (this.checked) {
for (var i = 0; i < chilength; i++) {
chi[i].children[0].checked = true;
}
} else {
for (var i = 0; i < chilength; i++) {
chi[i].children[0].checked = false;
}
}

if (bool) {
$("#all")[0].checked = true;
} else {
$("#all")[0].checked = false;
}
});
// 反选
$(".selCt").change(function() {
var cityNode = this.parentNode.parentNode.parentNode.children[0];
if (this.checked) {
cityNode.checked = true;
} else {
$("#all")[0].checked = false;
var sib = this.parentNode.parentNode.children;
var siblength = sib.length - 1;
var bool = false;
for (var i = 0; i < siblength; i++) {
if (sib[i].children[0].checked) {
bool = true;
break;
}
}
if (bool) {
cityNode.checked = true;
} else {
cityNode.checked = false;

}
}
})

// 悬停显示城市
$(".city").hover(function() {
$(this).find(".childen").css("display", "block")
$(this).addClass("hover")
}, function() {
$(this).removeClass("hover")
$(this).find(".childen").css("display", "none")
})
}
</script>
</body>

</html>

...全文