• 省市区三级联动


    在日常的上网中,我们经常遇到省市区的选择,在这里我们讲解一下“省市区的三级联动”

    第一:在html页面中写入div标签

    <title>三级联动</title>
    <script src="jquery-2.0.0.min.js"></script>
    <script src="sanji.js"></script>
    </head>
    
    <body>
    <h1>省市区选择</h1>
    <div id="sanji"></div>
    

      

    第二:在JScript中运行的代码

    1.首先是下拉列表填充事件

    $(document).ready(function(e) {
        
    	$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    	
    	//填充内容
    	//1.填充省
    	FillSheng();
    	//2.填充市
    	FillShi();
    	//3.填充区
    	FillQu();
    

      

    2.如果第一级的省选择发生变化,第二级和第三级也会发生变化

    //如果省选中变化了,去填充市和区
    	$("#sheng").change(function(){
    		
    		//改变市
    		FillShi();
    		//改变区
    		FillQu();
    		
    		})
    

      

    3.如果第二级的市选择发生变化,第三级就会发生变化

    //如果市选择变化了,去填充区
    	$("#shi").change(function(){
    		//改变区
    		FillQu();
    		
    		})
    

      

    4.上面引用的省填充fillsheng()函数

    //填充省的方法
    	function FillSheng()
    	{
    		//找到父级代号
    		var pcode="0001";
    		//调用ajax
    		$.ajax({
    			
    			async:false,
    			url:"chuli.php",
    			data:{pcode:pcode},
    			type:"POST",
    			dataType:"TEXT",
    			success: function(data){
    				
    				var str="";
    				var hang = data.split("|");
    				
    				for(var i=0;i<hang.length;i++)
    				{
    					var lie=hang[i].split("^");
    					str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    					
    				}
    				
    				$("#sheng").html(str);
    				
    				}
    			
    			});
    	}
    

      

    5.上面引用的市填充fillshi()函数

    //填充市的方法
    	function FillShi()
    	{
    		//找到父级代号
    		var pcode=$("#sheng").val();
    		//调用ajax
    		$.ajax({
    			
    			async:false,
    			url:"chuli.php",
    			data:{pcode:pcode},
    			type:"POST",
    			dataType:"TEXT",
    			success: function(data){
    				
    				var str="";
    				var hang = data.split("|");
    				
    				for(var i=0;i<hang.length;i++)
    				{
    					var lie=hang[i].split("^");
    					str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    					
    				}
    				
    				$("#shi").html(str);
    				
    				}
    			
    			});
    	}
    

      

    6.上面引用的区填充fillqu()函数

    //填充区的方法
    	function FillQu()
    	{
    		//找到父级代号
    		var pcode=$("#shi").val();
    		//调用ajax
    		$.ajax({
    			
    			async:false,
    			url:"chuli.php",
    			data:{pcode:pcode},
    			type:"POST",
    			dataType:"TEXT",
    			success: function(data){
    				
    				var str="";
    				var hang = data.split("|");
    				
    				for(var i=0;i<hang.length;i++)
    				{
    					var lie=hang[i].split("^");
    					str+="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
    					
    				}
    				
    				$("#qu").html(str);
    				
    				}
    			
    			});
    	}
    

      

    第三:在JScript中的ajax运行的chuli.php代码

    <?php
    $pcode=$_POST["pcode"];
    
    include("DBDA.class.php");
    $db=new DBDA();
    
    $sql = "select AreaCode,AreaName,ParentAreaCode from Chinastates where ParentAreaCode='{$pcode}'";
    
    echo $db->StrQuery($sql);
    

      

  • 相关阅读:
    vue项目本地调试,内网穿透
    EMQ开启mysql认证
    vsftpd配置安装
    express使用https
    vue实现图片的上传和删除
    Linux下获取java堆栈文件并进行分析
    kill -3 PID命令获取java应用堆栈信息
    Linux下的java虚拟机性能监控与故障处理命令
    k8s下的eureak服务注册失败(cannot execute request on any known server)解决
    MariaDB主从复制虚拟机实战
  • 原文地址:https://www.cnblogs.com/zst062102/p/5513444.html
Copyright © 2020-2023  润新知