js省市区三级联动

最新推荐文章于 2024-07-19 15:34:53 发布

沉香浮水

最新推荐文章于 2024-07-19 15:34:53 发布

阅读量164

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_44318915/article/details/115036346

版权

js省市区三级联动

最近用到了之前的上课笔记，在这里存个小档

//js省市区三级联动

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>级联列表</title>
	<style type="text/css"></style>
</head>
<body>

 <script type="text/javascript" src="city.json"></script>
<div>
 <select id="shen">
 	<option value="01"> 请选择你的省份 </option>
 </select>
 
  <select id="shi">
 	<option value="02"> 请选择你的市 </option>
 </select>
  <select id="qu">
 	<option value="03"> 请选择你的区 </option>
 </select>
 </div>
 <div>
 	<button>确定！</button>
 </div>

<script type="text/javascript">
 	let mydata = JSON.parse(data);

 	function getName(ele){
 		return ele.name;
 	}

    var shenArray = mydata.map(getName);

    function addArea(target,arr){
    	arr.forEach(function(value){
    	var op = document.createElement("option");
    	op.innerText = value;
    	target.appendChild(op);
    	})
    }

 

 	function getCitys(shenName){
 		for(let i=0;i<mydata.length;i++){
 			if(shenName===mydata[i].name){
 				return mydata[i].city.map(getName);
 			}
 		}
 	}
    


    function getqus(shiName){
        for(let i=0;i<mydata.length;i++){
            for(let j=0;j<mydata[i].city.length;j++){
                if(shiName===mydata[i].city[j].name){
                    return mydata[i].city[j].area;
                }
            }
        }
    }

 	

    
    addArea(document.getElementById("shen"),shenArray);

 	function shenChangeHandler(event){
 		
 		var shiArray = getCitys(this.value);
 		document.getElementById("shi").options.length=1;
 		console.log(this.value);
 		addArea(document.getElementById("shi"),shiArray);
 	}
 	
 	document.getElementById("shen").addEventListener("change",shenChangeHandler);


    



   

    function shiChangeHandler(event){
        
        var quArray = getqus(this.value);
        document.getElementById("qu").options.length=1;
        console.log(this.value);
        addArea(document.getElementById("qu"),quArray);
    }
    
    document.getElementById("shi").addEventListener("change",shiChangeHandler);




 	
 </script>

</body>
</html>

效果图

沉香浮水

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js省市区三级联动

js省市区三级联动js省市区三级联动最近用到了之前的上课笔记，在这里存个小档//js省市区三级联动<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>级联列表</title> <style type="text/css"></style></head><body> <script type="
复制链接

扫一扫