首页 前端知识 JS实现省市区三级联动(json假数据)

JS实现省市区三级联动(json假数据)

2024-08-16 22:08:32 前端知识 前端哥 752 825 我要收藏

省市级三级联动通常指的是在用户界面上,用户可以通过选择省份,然后基于所选择的省份选择对应的城市,最后基于所选择的城市选择对应的区县。这种联动效果在很多应用中都有出现,例如电商平台的收货地址选择、政务服务的地区选择等。

下面是一个使用JSON假数据实现省市级三级联动功能的示例。

JSON假数据
首先,我们需要构造一组包含省份、城市和区县信息的JSON假数据。

json
{  
  "provinces": [  
    {  
      "id": 1,  
      "name": "广东省",  
      "cities": [  
        {  
          "id": 1,  
          "name": "广州市",  
          "districts": [  
            {  
              "id": 1,  
              "name": "天河区"  
            },  
            {  
              "id": 2,  
              "name": "越秀区"  
            }  
          ]  
        },  
        {  
          "id": 2,  
          "name": "深圳市",  
          "districts": [  
            {  
              "id": 3,  
              "name": "福田区"  
            },  
            {  
              "id": 4,  
              "name": "南山区"  
            }  
          ]  
        }  
      ]  
    },  
    {  
      "id": 2,  
      "name": "浙江省",  
      "cities": [  
        {  
          "id": 3,  
          "name": "杭州市",  
          "districts": [  
            {  
              "id": 5,  
              "name": "西湖区"  
            },  
            {  
              "id": 6,  
              "name": "拱墅区"  
            }  
          ]  
        }  
      ]  
    }  
  ]  
}

具体代码与思路
1. 数据准备
将上述JSON数据保存在一个文件中,例如areas.json,然后在前端代码中通过AJAX请求或其他方式加载这个数据。

2. 前端页面结构
通常,我们会使用三个<select>元素来表示省份、城市和区县的选择框。

html
<select id="province"></select>  
<select id="city"></select>  
<select id="district"></select>

3. 初始化与数据绑定
当页面加载时,首先加载JSON数据。
根据加载的数据,动态生成省份的<option>元素,并绑定到省份的<select>元素上。
为省份的<select>元素添加change事件监听器,当用户选择省份时,根据所选省份动态生成城市的<option>元素,并绑定到城市的<select>元素上。
同样地,为城市的<select>元素添加change事件监听器,当用户选择城市时,根据所选城市动态生成区县的<option>元素,并绑定到区县的<select>元素上。
4. 示例代码(使用jQuery)
这里是一个使用jQuery实现的简单示例:

javascript
const data = {  
    "provinces": [  
        { "id": 1, "name": "省份1", "cities": [  
            { "id": 11, "name": "城市1", "districts": [  
                { "id": 111, "name": "区县1" },  
                { "id": 112, "name": "区县2" }  
            ] },  
            { "id": 12, "name": "城市2", "districts": [  
                { "id": 121, "name": "区县3" },  
                { "id": 122, "name": "区县4" }  
            ] }  
        ] },  
        { "id": 2, "name": "省份2", "cities": [ /* ... */ ] }  
    ]  
};
HTML 结构
接下来,我们需要在 HTML 中创建三个下拉框,分别用于选择省份、城市和区县。

html
<select id="province"></select>  
<select id="city"></select>  
<select id="district"></select>
JavaScript 代码
现在,我们编写 JavaScript 代码来填充这些下拉框,并实现联动效果。

javascript
// 填充省份下拉框  
const provinceSelect = document.getElementById('province');  
data.provinces.forEach(province => {  
    const option = document.createElement('option');  
    option.value = province.id;  
    option.text = province.name;  
    provinceSelect.appendChild(option);  
});  
  
// 监听省份下拉框的变化,并更新城市和区县下拉框  
provinceSelect.addEventListener('change', function() {  
    const selectedProvinceId = this.value;  
    const selectedProvince = data.provinces.find(p => p.id === parseInt(selectedProvinceId));  
    updateCitySelect(selectedProvince.cities);  
    clearDistrictSelect();  
});  
  
// 填充城市下拉框  
function updateCitySelect(cities) {  
    const citySelect = document.getElementById('city');  
    citySelect.innerHTML = ''; // 清空之前的选项  
    cities.forEach(city => {  
        const option = document.createElement('option');  
        option.value = city.id;  
        option.text = city.name;  
        citySelect.appendChild(option);  
    });  
    // 触发一次城市下拉框的变化,以更新区县下拉框(如果已经有默认选中的城市)  
    if (citySelect.options.length > 0) {  
        citySelect.dispatchEvent(new Event('change'));  
    }  
}  
  
// 监听城市下拉框的变化,并更新区县下拉框  
const citySelect = document.getElementById('city');  
citySelect.addEventListener('change', function() {  
    const selectedCityId = this.value;  
    const selectedProvinceId = provinceSelect.value;  
    const selectedProvince = data.provinces.find(p => p.id === parseInt(selectedProvinceId));  
    const selectedCity = selectedProvince.cities.find(c => c.id === parseInt(selectedCityId));  
    updateDistrictSelect(selectedCity.districts);  
});  
  
// 填充区县下拉框  
function updateDistrictSelect(districts) {  
    const districtSelect = document.getElementById('district');  
    districtSelect.innerHTML = ''; // 清空之前的选项  
    districts.forEach(district => {  
        const option = document.createElement('option');  
        option.value = district.id;  
        option.text = district.name;  
        districtSelect.appendChild(option);  
    });  
}  
  
// 清空区县下拉框的选项  
function clearDistrictSelect() {  
    const districtSelect = document.getElementById('district');  
    districtSelect.innerHTML = ''; // 清空之前的选项  
}

这个示例代码实现了基于假数据的三级联动下拉框。当用户选择省份时,城市下拉框会更新为所选省份下的城市列表;当用户选择城市时,区县下拉框会更新为所选城市下的区县列表。注意,这个示例仅用于演示基本思路,实际应用中可能需要更复杂的逻辑和错误处理。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15838.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!