三级联动省市区的地址选择

<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>`
			})
			
			
		})
	}
在这里插入代码片
三级联动 省市区的地址选择

猜你喜欢

三级联动省市区的地址选择
