JS Implementation of Provinces, Cities, and Districts Three-Level联动 Menu Effect

The effect is as follows:

The code is as follows:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Provincial, city, and district linkage</title>
</head>
<body>
 <form>
 <select id="province">
 <option>请选择省份</option>
 </select>
 <select id="city">
 <option>请选择城市</option>
 </select>
 <select id="district">
 <option>请选择区域</option>
 </select> 
 </form>
 <script src="json.js"></script>
 <script type="text/javascript">
 var proData = [],
 cityData = [],
 distData = [];
 var proSelect = document.getElementById("province"),
 citySelect = document.getElementById("city"),
 districtSelect = document.getElementById("district");
 var curPro = "",
 curCity = "";
 // Encapsulate the function to update the selection list
 function fillselect(select,list){
 for (var i = select.length-1; i > 0 ; i--{
 select.remove(i);
 }
 list.forEach(function(data){
 var option = new Option(data.name, data.sheng);
 option.dataset.di = data.di;
 select.add(option);
 }
 }
 // Store data by province, city, and area separately
 dataJson.forEach(function(data){
 if (data.level === 1{
 proData.push(data);
 }
 if (data.level === 2{
 cityData.push(data);
 }
 if (data.level === 3{
 distData.push(data);
 }
 }
 fillselect(proSelect,proData);
 // Listen to the change event of the primary province selection list and update the secondary city list
 proSelect.addEventListener("change",function(event){
 var val = event.target.value;
 var list = [];
 cityData.forEach(function(d){
 if (d.sheng === val) {
 list.push(d);
 }
 }
 fillselect(citySelect,list);
 }
 // Listen to the change event of the secondary city selection list and update the third-level area list
 citySelect.addEventListener("change",function(event){
 var val = event.target.value;
 var curIndex = event.target.selectedIndex;
 curCity = event.target[curIndex].dataset.di;
 console.log(event.target,curCity);
 var list = [];
 distData.forEach(function(d){
 if (d.di === curCity && d.sheng === val) {
 list.push(d);
 }
 }
 fillselect(districtSelect,list);
 }
 </script>
</body>
</html>

That's all for the content of this article. I hope the content of this article can bring some help to everyone's learning or work, and also hope to support the Yelling Tutorial more!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please replace '#' with '@' when sending an email for reporting. Provide relevant evidence, and once verified, the website will immediately delete the infringing content.

Basic Tutorial