80行原生js代码实现省市区选择

html

<!--
 * @Descripttion: Descripttion
 * @version: version
 * @Author: LGQ
 * @Date: 2020-05-28 09:55:34
 * @LastEditors: LGQ
 * @LastEditTime: 2020-05-28 11:35:30
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>省市区选择</title>
  <script src="./area.js"></script>
</head>

<body>
  <select id="province" onchange="provinceChange(this.value, this[selectedIndex].innerHTML)">
    <option value="0">请选择</option>
  </select>
  <select id="city" onchange="cityChange(this.value, this[selectedIndex].innerHTML)">
    <option value="0">请选择</option>
  </select>
  <select id="area" onchange="areaChange(this.value, this[selectedIndex].innerHTML)">
    <option value="0">请选择</option>
  </select>
  <h1 id="address"></h1>

  <script src="./main.js"></script>
</body>

</html>

main.js

/*
 * @Descripttion: Descripttion
 * @version: version
 * @Author: LGQ
 * @Date: 2020-05-28 09:57:22
 * @LastEditors: LGQ
 * @LastEditTime: 2020-05-28 11:35:18
 */

const provinceEl = document.getElementById('province')
const cityEl = document.getElementById('city')
const areaEl = document.getElementById('area')
const address = document.getElementById('address')
let province
let city
let area

for (let i in _data_.province_list) {
  let option = document.createElement('option')
  option.value = i
  option.innerText = _data_.province_list[i]
  provinceEl.appendChild(option)
}

// 选择省
function provinceChange(value, html) {
  cityEl.innerHTML = ''
  areaEl.innerHTML = ''
  cityEl.innerHTML = `<option value="0">请选择</option>`
  areaEl.innerHTML = `<option value="0">请选择</option>`
  if (value === '0') {
    return
  }
  console.log(value, html)
  province = html
  let code = value.slice(0, 2)
  for (let i in _data_.city_list) {
    let cityCode = i.slice(0, 2)
    if (cityCode === code) {
      let option = document.createElement('option')
      option.value = i
      option.innerText = _data_.city_list[i]
      cityEl.appendChild(option)
    }
  }
}

// 选择市
function cityChange(value, html) {
  areaEl.innerHTML = ''
  areaEl.innerHTML = `<option value="0">请选择</option>`
  if (value === '0') {
    return
  }
  console.log(value, html)
  city = html
  let code = value.slice(0, 4)
  for (let i in _data_.county_list) {
    let cityCode = i.slice(0, 4)
    if (cityCode === code) {
      let option = document.createElement('option')
      option.value = i
      option.innerText = _data_.county_list[i]
      areaEl.appendChild(option)
    }
  }
}

// 选择区
function areaChange(value, html) {
  console.log(value, html)
  area = html

  if (province === city) {
    address.innerHTML = '地址为：' + province + area
  } else {
    address.innerHTML = '地址为：' + province + city + area
  }
  address.style.display = 'block'
}

area.js代码有点多，需要另外下载

80行原生js代码实现省市区选择

猜你喜欢