原生JS方法写三级联动

最新推荐文章于 2023-09-23 13:15:52 发布
最新推荐文章于 2023-09-23 13:15:52 发布
阅读量5.5k 收藏 4
点赞数 4
分类专栏： 工作网页特效日常积累 文章标签： 原生JS 三级联动 WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_YanYan/article/details/73550946
版权

      最近在练习项目时，遇到了三级联动问题，于是就在本地用JS做了一个三级联动，如有写的不对的地方，请大佬们指正出来~

      1、搞清楚<select></select>标签的一些选择框脚本。

            1.当选中某个option时，其selected脚本属性为true。

            2.select列表的长度为长度即为<option></option>的数目和。

      2、初始化列表值

               HTML代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        text-align: center;
        display: inline;
        height: 20px;
        width: auto;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
</style>

<body>
    <div>
        <select name="provance" id="province"></select>
        <select name="city" id="city"></select>
        <select name="town" id="town"></select>
    </div>

</body>

</html>

            1.先写出可供选择列表种类的json值

        let optionKinds = {
          "province": {
            "河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'],
            "河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'],
            "广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'],
          },
          "city": {
            "石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'],
            "唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'],
            "郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'],
            "焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'],
            "开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区']
          },
        };
          2.初始化列表的第一个值，解决其问题为，将对象中的子元素key值，写到数组中去，方法如下 

     function turn_arr(oJsonArr) {
        let iCount = 0;
        let turn_json_arr = [];
        for (key in oJsonArr) {
          turn_json_arr.push(key);
        }
        return turn_json_arr;
      }

           3.初始化列表的值

  function init(which_select, keyWord, which_select_son) {
          let placeOption = '';
          let option_arr = operation.turn_arr(optionKinds[keyWord]);
          for (let i = 0; i < optionPro_arr.length; i++) {
            placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>";
          }
          which_select.innerHTML = placeOption;
          relevance_place(which_select, keyWord, which_select_son);//初始化与之相关联的子列表
        }
        function relevance_place(which_select, keyWord, which_select_son) {
          let placeOption_son = '';
          for (let i = 0; i < which_select.length; i++) {
            if (which_select[i].selected) {
              for (key in optionKinds[keyWord]) {
                if (key == which_select[i].value) {
                  for (let i = 0; i < optionKinds[keyWord][key].length; i++) {
                    placeOption_son+= "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[keyWord][key][i] + "</option>"
                  }
                  which_select_son.innerHTML = placeOption_son
                }
              }
            }
          }
        }
        init(document.getElementById('province') "province", document.getElementById('city'));
        init(document.getElementById('city'), "city", document.getElementById('town'));

        4.对列表选项进行监听            
        EventUtil.addHandler(document.getElementById('province'), 'change', function () {
          relevance_place(document.getElementById('province'), "province", document.getElementById('city'));
          relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
        })
        EventUtil.addHandler(document.getElementById('city'), 'change', function () {
           relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
    })
   整个代码如下 



       
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        text-align: center;
        display: inline;
        height: 20px;
        width: auto;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
</style>

<body>
    <div>
        <select name="provance" id="province"></select>
        <select name="city" id="city"></select>
        <select name="town" id="town"></select>
    </div>
</body>
<script>
    let EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false)
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, handler);
            } else {
                element['on' + type] = handler
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        },
        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        }

    }
    let optionKinds = {
        "province": {
            "河北省": ['石家庄', '唐山', '邯郸', '保定', '沧州', '邢台市', '廊坊市', '承德市', '张家口', '衡水', '秦皇岛'],
            "河南省": ['郑州', '开封', '洛阳', '南阳', '漯河', '许昌', '三门峡', '周口', '驻马店', '焦作', '濮阳', '安阳', '商丘', '信仰', '济源'],
            "广东省": ['广州', '珠海市', '汕头', '韶关', '佛山', '江门', '江门', '河源', '江阳'],
        },
        "city": {
            "石家庄": ['桥西区', '新华区', '长安区', '裕华区', '石家庄矿区', '路园区'],
            "唐山": ['曹妃甸区', '古治区', '丰南区', '开平区', '丰润区', '路北区', '迁安市', '敦化市'],
            "郑州": ['惠济区', '二七区', '管城回族区', '中原区', '金水区', '郑东新区'],
            "焦作": ['解放区', '山阳区', '中站区', '马村区', '修武县', '武陟县', '温县', '博爱县', '沁阳市', '孟州市'],
            "开封": ["龙亭区", '顺和回族区', '鼓楼区', '禹王台区', '祥符区']
        },
    };

    function turn_arr(oJsonArr) {
        let iCount = 0;
        let turn_json_arr = [];
        for (key in oJsonArr) {
            turn_json_arr.push(key);
        }
        return turn_json_arr;
    }

    function init(which_select, keyWord, which_select_son) {
        let placeOption = '';
        let option_arr = turn_arr(optionKinds[keyWord]);
        for (let i = 0; i < option_arr.length; i++) {
            placeOption += "<option value='" + option_arr[i] + "'>" + option_arr[i] + "</option>";
        }
        which_select.innerHTML = placeOption;
        relevance_place(which_select, keyWord, which_select_son); //初始化与之相关联的子列表
    }

    function relevance_place(which_select, keyWord, which_select_son) {
        let placeOption_son = '';
        for (let i = 0; i < which_select.length; i++) {
            if (which_select[i].selected) {
                for (key in optionKinds[keyWord]) {
                    if (key == which_select[i].value) {
                        for (let i = 0; i < optionKinds[keyWord][key].length; i++) {
                            placeOption_son += "<option value='" + optionKinds[keyWord][key][i] + "'>" + optionKinds[
                                keyWord][key][i] + "</option>"
                        }
                        which_select_son.innerHTML = placeOption_son
                    }
                }
            }
        }
    }
    init(document.getElementById('province'), "province", document.getElementById('city'));
    init(document.getElementById('city'), "city", document.getElementById('town'));
    EventUtil.addHandler(document.getElementById('province'), 'change', function () {
        relevance_place(document.getElementById('province'), "province", document.getElementById('city'));
        relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
    });
    EventUtil.addHandler(document.getElementById('city'), 'change', function () {
        relevance_place(document.getElementById('city'), 'city', document.getElementById('town'));
    })
</script>
</html> 
// 整个功能代码及分析如上所示。欢迎大家留言交流讨论~~







                

        

        

    




    

      

        

            

              
                
                  乐橙Web
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    4
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
原生js省市三级联动

				
			

			

				

					10-26
				

			

		

		

			
				
JavaScript的原生省市三级联动效果，一般在电商网站，收货地址等用到！

			
		

	



                

              
                



	

		

			

				
					
js 城市三级联动

				
			

			

				

					ZXL工作室
				

				

					06-11
					
					4829
					
				

			

		

		

			
				
cityData.js
var cityData = function(b,a){return[{name:"请选择",sub:[{name:"请选择"}],type:1},{name:"北京",sub:[{name:"请选择"},{name:"东城区"},{name:"西城区"},{name:"崇文区"},{name:"宣武区"},{name:"朝阳区"},{name:"海淀区"},{name

			
		

	



                


  
              

                


	

		

			

				
					
javaScript小案例------js实现三级联动效果篇

				
			

			

				

					前端叶荨，随手记
				

				

					04-03
					
					4235
					
				

			

		

		

			
				
javaScript小案例------js实现三级联动
原生js实现省市学校三级联动

			
		

	





	

		

			

				
					
js 实现三级联动

					
最新发布

				
			

			

				

					qq_60504665的博客
				

				

					09-23
					
					999
					
				

			

		

		

			
				
其中三级联动是比较常见的功能，比如实现省、市、区的联动选择。实现三级联动的核心是使用JavaScript根据用户的选择动态生成选项，下面将通过举例说明如何实现一个省、市、区的三级联动选择。当用户选择省份时，上面的代码会触发change事件，接下来需要根据选择的省份动态生成市级选项。上面的代码首先清空了区级选项，然后根据用户选择的市级选项动态生成区级选项，最后将生成的选项添加到区级下拉框中。上面的代码首先清空了市级选项，然后根据用户选择的省份动态生成市级选项，最后将生成的选项添加到市级下拉框中。

			
		

	



		

			
		



	

		

			

				
					
JavaScript实现DropDownList(Select)三级联动无刷新

				
			

			

				

					
				

				

					07-05
					
					2011
					
				

			

		

		

			
				
Javascript代码                    function CountryChange(){          countryid=document.getElementById("ddlContry").value;          if(countryid==null||countryid==""){          alert("请选择所属国家");        

			
		

	





	

		

			

				
					
匹配区县代码_省份、城市、区县三级联动Html代码

				
			

			

				

					weixin_39618806的博客
				

				

					12-21
					
					605
					
				

			

		

		

			
				
$(function(){function objInit(obj){return $(obj).html("请选择");}var arrData = {江西省:{宜春市: "袁州区,万载县",品牌1_2: "型号1_2_1,型号1_2_2"},湖南省:{邵阳市: "邵阳县,型号2_1_2",品牌2_2: "型号2_2_1,型号2_2_2"},厂商3:{品牌3_1: "型号3_1_1,型号3_1_...

			
		

	





	

		

			

				
					
纯H5实现二级联动，三级联动，包括搜索功能（jq）

				
			

			

				

					夏微微的博客
				

				

					05-20
					
					2177
					
				

			

		

		

			
				
1.先来看看二级联动吧（话不多说，直接上代码）
来一段html代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name=

			
		

	





	

		

			

				
					
原生JS实现省市区三级联动

				
			

			

				

					summer爱前端
				

				

					04-09
					
					847
					
				

			

		

		

			
				
三级联动

三级联动的需求很常见，在上一篇我写的项目总结中，就有三级联动的需求，下面我将使用原生的JS写一个简易的省市区的三级联动
—————————————————————————————————————————
准备工作——>node环境（有nodemon工具更好）、三级联动数据、express（简单利用）
—————————————————————————————————————————
代码有详细注释

代码
html部分：
<!DOCTYPE html>
<html lan

			
		

	





	

		

			

				
					
JavaScript省份城市的三级联动

				
			

			

				

					MyLove的博客
				

				

					11-28
					
					881
					
				

			

		

		

			
				
使用JavaScript中变量（数组或对象）定义省份及对应的城市，应用Select标签对象，实现二级级联的 下拉菜单选中效果。也就是说，在省份下拉菜单中，选中一个省份时，在城市下拉菜单中出现对应城市选择内容。

			
		

	





	

		

			

				
					
JS操作节点经典案例（三级联动）

				
			

			

				

					个人网站：https://www.longzipeng.online 
				

				

					08-21
					
					595
					
				

			

		

		

			
				
引入
通过JS操作DOM元素对象，实现三级联动，效果如图所示。

js代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三级联动</title>
	</head>
	<body>
		<select name="province" id="province" onchange="changeP(this)">
			

			
		

	





	

		

			

				
					
原生js写简单三级联动以及复杂三级联动

					
热门推荐

				
			

			

				

					我的博客
				

				

					08-23
					
					1万+
					
				

			

		

		

			
				
1. 简单三级联动
效果图：


思想：当选择省时，创建对应的市子对象，并将其加入父元素中。当选择某一个市时，创建对应的区子对象，并将其加入父元素中。当选择其他省/市时，对应的市、区/区的选项都变为请选择。要注意：在每次重新选择时，需要将其余select标签的options元素的长度为1，即做一次清空。


知识点：① 在创建<select></select>标签的子元素&...

			
		

	





	

		

			

				
					
JS省市级三级联动[超简单]

				
			

			

				

					07-11
				

			

		

		

			
				
通过JS，连接JS后直接可以使用JS

			
		

	





	

		

			

				
					
纯js省市县三级联动实用案例 超实用超简单

				
			

			

				

					03-23
				

			

		

		

			
				
纯js省市县三级联动实用案例 超实用超简单

			
		

	





	

		

			

				
					
超简单的三级联动 javascript代码

				
			

			

				

					11-29
				

			

		

		

			
				
超级简单的js三级联动代码，信不信由你，分享一下

			
		

	





	

		

			

				
					
原生js三级联动的简单实现代码

				
			

			

				

					10-22
				

			

		

		

			
				
下面小编就为大家带来一篇原生js三级联动的简单实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
html5地区三级联动

				
			

			

				

					03-19
				

			

		

		

			
				
手机端h5省市区三级联动，滑动选择，自动获取位置，可以实现ios选择器样式

			
		

	





	

		

			

				
					
三级联动js，很好用的

				
			

			

				

					07-30
				

			

		

		

			
				
三级联动js，非常好用，传上来分享一下三级联动js，非常好用，传上来分享一下

			
		

	





	

		

			

				
					
原生javascript AJAX 三级联动的实现代码

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了原生javascript AJAX 三级联动的实现代码，非常不错代码简单易懂，具有一定的参考借鉴价值,需要的朋友可以参考下

			
		

	





	

		

			

				
					
原生js实现省市区三级联动代码分享

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了原生js实现省市区三级联动功能以及代码分享，对此有需要的朋友可以参考学习下。

			
		

	





	

		

			

				
					
原生js省市县三级联动

				
			

			

				

					08-20
				

			

		

		

			
				
原生JavaScript实现省市县三级联动的方法如下： 首先，需要准备好省市县的数据。可以通过JSON格式的数据来表示，比如： ```javascript var data = {  "province": [  {  "name": "省份1",  "cities": [  {  "name": ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值