引言
项目开发中,经常会遇到城市三级联动的需求,这里总结一下使用 jQuery 方式实现三级联动
首先,城市数据有可能需要放在前端代码中,所以需要把数据单独放到一个 js 文件中,然后在页面引入
1.引入 jQuery 和 城市数据文件
<!-- 引入 jQuery -->
<script src="https://probe.bjmantis.net/chat/jquery-1.12.4.min.js"></script>
<!-- 引入城市数据 -->
<script type="application/javascript" src="provinceData.js"></script>
2.页面布局
<div class="list">
<select name="" id="selProvince">
<option value="">请选择</option>
</select>
<select name="" id="selCity">
<option value="">请选择</option>
</select>
<select name="" id="selCountry">
<option value="">请选择</option>
</select>
</div>
3. js 逻辑
$(function () {
// 使用引入的数据
var provinceList = provinceData
var iNum1
var iNum2
console.log(provinceList)
// 城市及联
for (var i = 0; i < provinceList.length; i++) {
$('#selProvince').append('<option>' + provinceList[i].name + '</option>')
}
$('#selProvince').change(function () {
$('#selCity').children().not(':eq(0)').remove()
iNum1 = $(this).children('option:selected').index()
var aaCity = provinceList[iNum1 - 1].children
for (var j = 0; j < aaCity.length; j++) {
$('#selCity').append('<option>' + aaCity[j].name + '</option>')
}
})
$('#selCity').change(function () {
$('#selCountry').children().not(':eq(0)').remove()
iNum2 = $(this).children('option:selected').index()
var aaCountry = provinceList[iNum1 - 1].children[iNum2 - 1].children
for (var k = 0; k < aaCountry.length; k++) {
$('#selCountry').append('<option>' + aaCountry[k].name + '</option>')
}
})
})
4.js 数据文件
文件地址以及完整代码:城市数据
网友评论