jquery 二级城市联动
作者:野牛程序员:2024-02-03 10:13:22网页设计阅读 2393
jQuery实现二级城市联动的方法如下:
// 假设你有两个select元素,一个用于选择省份,一个用于选择城市 var $provinceSelect = $('#province'); var $citySelect = $('#city'); // 假设你有一个包含省份和城市信息的JSON对象,结构如下: var provinceCityData = { "江苏省": ["南京市", "苏州市", "无锡市", "常州市"], "浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市"], // 其他省份及城市信息 }; // 当选择省份时,更新城市选项 $provinceSelect.on('change', function() { var selectedProvince = $(this).val(); // 获取选择的省份 // 清空城市选项 $citySelect.empty(); // 如果选择的省份在数据中有对应的城市信息,则将城市选项填充 if (provinceCityData[selectedProvince]) { // 遍历选择的省份对应的城市数组 $.each(provinceCityData[selectedProvince], function(index, city) { // 创建城市选项并添加到城市select元素中 $citySelect.append('<option>' + city + '</option>'); }); } }); // 初始化省份选项 $.each(provinceCityData, function(province) { $provinceSelect.append('<option>' + province + '</option>'); }); // 触发一次省份选择事件,以便初始化城市选项 $provinceSelect.trigger('change');
上面的代码首先假设你有两个select
元素,一个用于选择省份,一个用于选择城市,并且有一个包含省份和城市信息的JSON对象provinceCityData
。当选择省份时,通过jQuery监听省份选择的变化事件,根据所选省份更新城市选项。
野牛程序员教少儿编程与信息学奥赛-微信|电话:15892516892
- 上一篇:jQuery城市选择器
- 下一篇:PHP Twig 教程