掘金最佳JavaScript行政区划库——china-location，助你省时省力！

2023-09-20 09:59:57

引言

大家在做项目时，经常需要在前端页面实现地址选择的功能。最常见的莫过于省市区三级联动下拉列表。实现这个功能，最简单的方法就是使用第三方库。但是，网上现有的很多库都存在着这样或那样的问题。有的库数据不全，有的库使用起来很麻烦。

为了解决这些问题，我向大家推荐china-location这个库。china-location是一个非常方便的JavaScript行政区划库，它具有以下优点：

数据全面 ：china-location库包含了中国所有省、市、区县的数据，并提供了JSON格式的数据文件，方便开发者使用。
使用简单 ：china-location库的使用非常简单，只需一行代码即可实现省市区三级联动下拉列表。
无需后台支持 ：china-location库完全在前端实现，无需后台支持，因此可以非常方便地集成到任何项目中。
跨平台支持 ：china-location库支持所有主流浏览器，包括IE、Chrome、Firefox和Safari。

如何使用

要使用china-location库，首先需要安装它。可以使用以下命令安装：

npm install china-location --save

安装完成后，就可以在项目中使用它了。以下是一个简单的示例：

import ChinaLocation from 'china-location'

const provinceSelect = document.getElementById('province')
const citySelect = document.getElementById('city')
const countySelect = document.getElementById('county')

const chinaLocation = new ChinaLocation()

chinaLocation.getAllProvinces().then(provinces => {
  provinces.forEach(province => {
    const option = document.createElement('option')
    option.value = province.code
    option.textContent = province.name
    provinceSelect.appendChild(option)
  })
})

provinceSelect.addEventListener('change', e => {
  const provinceCode = e.target.value
  chinaLocation.getCitiesByProvinceCode(provinceCode).then(cities => {
    citySelect.innerHTML = ''
    cities.forEach(city => {
      const option = document.createElement('option')
      option.value = city.code
      option.textContent = city.name
      citySelect.appendChild(option)
    })
  })
})

citySelect.addEventListener('change', e => {
  const cityCode = e.target.value
  chinaLocation.getCountiesByCityCode(cityCode).then(counties => {
    countySelect.innerHTML = ''
    counties.forEach(county => {
      const option = document.createElement('option')
      option.value = county.code
      option.textContent = county.name
      countySelect.appendChild(option)
    })
  })
})