通过json文件把省市区信息依次添加到多选框中,实现三级联动的效果(样式比较简单,实际应用中可以修改)
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
#ZQjfamily {
position: relative;
display: flex;
}
#ZQjfamily>select {
display: block;
padding: 10px 54px;
border-radius: 25%;
background-color: rgb(0, 0, 0, 0);
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
z-index: 999999;
margin-right: 10px;
}
#ZQjfamily>select:focus {
outline: none;
}
#ZQjfamily>.ZQjhuakuai {
border-radius: 25%;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
width: 1px;
height: 39px;
position: absolute;
background-color: rgb(152, 183, 85);
left: 0px;
transition: all .5s linear;
top: 1px;
z-index: 99;
}
</style>
</head>
<body>
<div id="ZQjfamily">
<div class="ZQjhuakuai"></div>
<select name="" class="active" id="provinceZQj">
<option data-index="moren">请选择省</option>
</select>
<select name="" id="cityZQJ">
<option disabled selected>请先选择省</option>
</select>
<select name="" id="districtZQJ">
<option disabled selected>请先选择省和城市</option>
</select>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(".ZQjhuakuai").css("width", $('.active').css('width'));
$('#ZQjfamily').on('mouseenter', 'select', function (e) {
$('.ZQjhuakuai').css("left", e.currentTarget.offsetLeft + "px");
$('.ZQjhuakuai').css("width", $(this).css("width"))
})
$('#ZQjfamily').on('mouseleave', 'select', function (e) {
$(".ZQjhuakuai").css("left", $('.active')[0].offsetLeft + "px");
$('.ZQjhuakuai').css("width", $('.active').css('width'))
})
$("#ZQjfamily").on("click", 'select', function (e) {
$("select").removeClass("active");
$(this).addClass("active");
$('.ZQjhuakuai').css("width", $(this).css("width"))
$(".ZQjhuakuai").css("left", e.currentTarget.offsetLeft + "px");
})
var information = null
var cityList = null
var cityIndex = null
$.getJSON('./sanji.json', function (data) {
information = data
$.each(data, function (index, value) {
var provinceZQj = document.createElement('option')
$(provinceZQj).text(value.value)
$(provinceZQj).val(value.value)
$(provinceZQj).attr('data-index', index)
$('#provinceZQj').append(provinceZQj)
})
})
$('#provinceZQj').change(function () {
$('#cityZQJ').html()
$('#cityZQJ').html('<option disabled selected>请先选择省</option>')
$('#districtZQJ').html()
$('#districtZQJ').html('<option disabled selected>请先选择省和城市</option>')
$('#cityZQJ>option').remove(0)
const provinceIndex = $(this).children("option:selected").attr('data-index')
cityList = information[provinceIndex]['child']
console.log(cityList);
$.each(cityList, function (index, value) {
var cityZQJ = document.createElement('option')
$(cityZQJ).text(value.value)
$(cityZQJ).val(value.value)
$(cityZQJ).attr('data-index', index)
$('#cityZQJ').append(cityZQJ)
})
cityIndex = $('#cityZQJ').children("option:selected").attr('data-index')
var districtList = cityList[cityIndex]['child']
$('#districtZQJ>option').remove(0)
$.each(districtList, function (index, value) {
var districtZQJ = document.createElement('option')
$(districtZQJ).text(value.value)
$(districtZQJ).val(value.value)
console.log(districtZQJ);
$('#districtZQJ').append(districtZQJ)
})
})
$('#cityZQJ').change(function () {
$('#districtZQJ').html()
$('#districtZQJ').html('<option disabled selected>请先选择省和城市</option>')
$('#districtZQJ>option').remove(0)
cityIndex = $(this).children("option:selected").attr('data-index')
var districtList = cityList[cityIndex]['child']
$.each(districtList, function (index, value) {
var districtZQJ = document.createElement('option')
$(districtZQJ).text(value.value)
$(districtZQJ).val(value.value)
$('#districtZQJ').append(districtZQJ)
})
})
</script>
</html>