jQuery京东省市联动下拉框
京东的省市联动下拉框，算是老前端们都折腾过的经典功能了。jQuery配合JSON异步加载，响应也快，逻辑也清楚。你只要监听一下省份选择框的change事件，根据选中的值筛出对应城市，再动态渲染城市列表，整个流程一套下来其实挺顺的。
数据方面嘛，一般就放个province_city_data.json，结构别太复杂，读取方便。像电商网站、会员中心这些场景，用户要选地址时就常见。你可以先准备好两个标签，一个放省，一个放城市，后续更新就靠$('#city').html()搞定。
代码也不难：
$(document).ready(function() {
$('#province').on('change', function() {
var selectedProvince = $(this).val();
$.getJSON('province_city_data.json', function(data) {
var options = '';
data.forEach(function(item) {
if (item.province === selectedProvince) {
item.cities.forEach(function(city) {
options += '<option value="' + city + '">' + city + '</option>';
});
}
});
$('#city').html(options);
});
});
});，如果你城市数据太大，建议一开始别加载太多，等用户选省份后再异步拉，体验会更好。还有，别忘了加个错误，要是JSON加载失败，总不能让页面挂着不动吧？
，jQuery 城市联动这功能在项目里经常用到，封装一下还能复用，挺值的。如果你想更深入地玩玩，还可以试试本地缓存优化、响应式适配这些细节，提升也不小。
对了，如果你对下拉框的联动逻辑还想看别的例子，这篇也挺实用，建议收藏。
下载地址
用户评论
