<html>
<head>
<meta charset="{utf-8}">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
select {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<select onchange="getCity(this)" )>
<option value="">请选择</option>
</select>
<select name="" onchange="getArea(this)">
<option value="">请选择</option>
</select>
<select>
<option value="">请选择</option>
</select>
<script type="text/javascript">
function ajax(method, url, data, fn) {
let htp = null;
try {
htp = new XMLHttpRequest()
} catch (err) {
htp = new ActiveXObject("Microsoft.XMLHTTP")
}
if (method == "get") {
htp.open(method, url + "?" + data);
htp.send()
} else {
htp.open(method, url);
htp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
htp.send(data)
}
htp.onreadystatechange = function() {
if (htp.readyState == 4 && htp.status == 200) {
fn(htp.responseText)
}
}
}
let arrsel=document.querySelectorAll("select")
ajax("get","province.json","",function(data){
let dapro = JSON.parse(data);
dapro.forEach(function(item){
arrsel[0].innerHTML+=`<option value="${item.id}">${item.name}</option>`
})
})
function getCity(that){
arrsel[1].innerHTML="<option value=''>请选择</option>";
ajax("get","city.json","",function(data){
let dacity=JSON.parse(data)
dacity[that.value].forEach(function (item) {
arrsel[1].innerHTML+=`
<option value="${item.id}">${item.name}</option>`
})
})
}
function getArea(that){
arrsel[2].innerHTML="<option value=''>请选择</option>";
ajax("get","area.json","",function(data){
let daAr=JSON.parse(data);
daAr[that.value].forEach(function (item){
arrsel[2].innerHTML+=`
<option value="">${item.name}</option>`
})
})
}
在这里插入代码片
三级联动 省市区的地址选择
最新推荐文章于 2024-08-07 14:32:08 发布