使用
layui
不需要请求任何API
只需要一个JSON数据
zone.js
( 复制到自己本地服务器 )
<script>
let $ = layui.$, form = layui.form
let provinceHtml = ``, cityHtml = ``, areaHtml = ``
let provinceCityData = [], cityAreaData = []
// 首次进来默认渲染省市区
areaData.forEach(item => {
provinceHtml += ``
provinceCityData[item.value] = item.children
item.children.forEach(item2 => {
if (item.value == '110000') cityHtml += ``
item2.children.forEach(item3 => {
if (item.value == '110000') areaHtml += ``
})
})
})
$('#province').html(provinceHtml)
$('#city').html(cityHtml)
$('#area').html(areaHtml)
form.render('select');
// 监听省份选择
form.on('select(province)', function (data) {
let value = data.value
if (!value) return
let cityHtml = ``
let areaHtml = ``
provinceCityData[value].forEach(item => {
cityHtml += ``
cityAreaData[item.value] = item.children
item.children.forEach(item2 => {
areaHtml += ``
})
})
$('#city').html(cityHtml)
$('#area').html(areaHtml)
form.render('select')
})
// 监听城市选择
form.on('select(city)', function (data) {
let value = data.value
if (!value) return
let areaHtml = ``
cityAreaData[value].forEach(item => {
areaHtml += ``
})
$('#area').html(areaHtml)
form.render('select')
})
form.on('submit(ids)', function (data) {
let field = data.field
layer.alert(`获取到的省市区ID为：${field.province}、${field.city}、${field.area}`)
})
form.on('submit(texts)', function (data) {
let province = $('#province option:selected').text()
let city = $('#city option:selected').text()
let area = $('#area option:selected').text()
layer.alert(`获取到的省市区文本为：${province}-${city}-${area}`)
})
</script>