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" οnchange="provinceChange(this.value, this[selectedIndex].innerHTML)">
<option value="0">請選擇</option>
</select>
<select id="city" οnchange="cityChange(this.value, this[selectedIndex].innerHTML)">
<option value="0">請選擇</option>
</select>
<select id="area" οnchange="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代碼有點多，需要另外下載