jQuery实现省、市二级联动

以下是一个使用jQuery实现省、市二级联动的简单示例。假设我们有两个下拉列表，分别用于选择省份和城市，并且我们有两个JSON对象provinces和cities来分别存储省份和城市的数据。

HTML部分：

<select id="province-select">
  <option value="">选择省份</option>
</select>
 
<select id="city-select">
  <option value="">选择城市</option>
</select>

JavaScript部分（jQuery和JSON数据）：

// 假设的省份和城市数据
var provinces = [
  { name: '广东', cities: ['广州', '深圳', '珠海'] },
  { name: '四川', cities: ['成都', '乐山', '德阳'] }
];
 
var cities = {
  '广东': ['广州', '深圳', '珠海'],
  '四川': ['成都', '乐山', '德阳']
};
 
$(document).ready(function() {
  // 填充省份下拉列表
  for (var i = 0; i < provinces.length; i++) {
    $('#province-select').append($('<option>', {
      value: provinces[i].name,
      text: provinces[i].name
    }));
  }
 
  // 省份下拉列表变化时，更新城市下拉列表
  $('#province-select').change(function() {
    var province = $(this).val();
    var cityOptions = $('#city-select');
    cityOptions.empty(); // 清空城市下拉列表
    cityOptions.append($('<option>', {
      value: '',
      text: '选择城市'
    }));
 
    if (province) {
      cities[province].forEach(function(city) {
        cityOptions.append($('<option>', {
          value: city,
          text: city
        }));
      });
    }
  });
});

这段代码首先在文档加载完成时，将省份数据填充到省份下拉列表中。然后，当省份下拉列表的值发生变化时，会更新城市下拉列表，只显示与选定省份相关的城市。这里使用了JSON对象cities来存储省份到城市列表的映射，这样可以直接通过省份作为键来访问相关的城市数组。