三级联动
Posted __逆光
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了三级联动相关的知识，希望对你有一定的参考价值。
做一个主界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../jquery-1.11.2.min.js"></script> //引入js包 <script src="sanji.js"></script> //引入sanji的js文件 <title>无标题文档</title> </head> <body> <div id="sanji"></div> 做一个id为sanji的div </body> </html>
sanji.js文件 一定要捋好逻辑
1 // javascript Document 2 $(document).ready(function(e) { 3 //找到ID=SANJI的DIV，造三个下拉扔进去 4 $("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>"); 5 6 //加载省的数据 7 LoadSheng(); 8 //加载市的数据 9 LoadShi(); 10 //加载区的数据 11 LoadQu(); 12 13 //给省的下拉加点击事件 14 $("#sheng").click(function(){ 15 //重新加载市 16 LoadShi(); 17 //重新加载区 18 LoadQu(); 19 }) 20 //给市的下拉加点击事件 21 $("#shi").click(function(){ 22 //重新加载区 23 LoadQu(); 24 }) 25 26 }); 27 //加载省份的方法 28 function LoadSheng() 29 { 30 //省的父级代号 31 var pcode = "0001"; 32 $.ajax({ 33 async:false, 34 url:"chuli.php", 35 data:{pcode:pcode}, 36 type:"POST", 37 dataType:"TEXT", 38 success: function(data){ 39 var hang = data.trim().split("|"); 40 var str = ""; 41 for(var i=0;i<hang.length;i++) 42 { 43 var lie = hang[i].split("^"); 44 str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; 45 } 46 $("#sheng").html(str); 47 } 48 }); 49 } 50 //加载市的方法 51 function LoadShi() 52 { 53 //找市的父级代号 54 var pcode = $("#sheng").val(); 55 $.ajax({ 56 async:false, 57 url:"chuli.php", 58 data:{pcode:pcode}, 59 type:"POST", 60 dataType:"TEXT", 61 success: function(data){ 62 var hang = data.trim().split("|"); 63 var str = ""; 64 for(var i=0;i<hang.length;i++) 65 { 66 var lie = hang[i].split("^"); 67 str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; 68 } 69 $("#shi").html(str); 70 } 71 }); 72 } 73 74 //加载区的方法 75 function LoadQu() 76 { 77 //找区的父级代号 78 var pcode = $("#shi").val(); 79 $.ajax({ 80 url:"chuli.php", 81 data:{pcode:pcode}, 82 type:"POST", 83 dataType:"TEXT", 84 success: function(data){ 85 var hang = data.trim().split("|"); 86 var str = ""; 87 for(var i=0;i<hang.length;i++) 88 { 89 var lie = hang[i].split("^"); 90 str = str+"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; 91 } 92 $("#qu").html(str); 93 } 94 }); 95 }
处理页面
<?php //给我一个父级代号，返回该父级代号下所有的子地区 $pcode = $_POST["pcode"]; require "DBDA.class.php"; $db = new DBDA(); $sql = "select areacode,areaname from chinastates where parentareacode=‘{$pcode}‘"; echo $db->strquery($sql);
运行主界面就可以显示三级联动
下面这是我自己写的，然后又加的补充，代码冗长，不易阅读，最主要的是代码的重复量极高
代码如下
主页面
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="jquery-3.2.0.js"></script> 7 </head> 8 9 <body> 10 11 中国 12 <select id="sheng"></select> 13 <select id="shi"></select> 14 <select id="qu"></select> 15 16 </body> 17 <script type="text/javascript"> 18 $(document).ready(function(e) { 19 $.ajax({ 20 async:false, 21 url:"0513shengcl.php", 22 data:"TEXT", 23 success: function(data){ 24 var hang = data.split("|"); 25 var str=""; 26 for(var i=0;i<hang.length;i++) 27 { 28 var lie = hang[i].split("^"); 29 str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>" ; 30 } 31 $("#sheng").html(str); 32 } 33 }) 34 }); 35 $(document).ready(function(e) { 36 37 var b = $("#sheng").val(); 38 //alert(b); 39 $.ajax({ 40 async:false, 41 url:"0513shicl.php", 42 data:{b1:b}, 43 type:"POST", 44 dataType:"TEXT", 45 success: function(data1){ 46 var hang1 = data1.split("|"); 47 var str1=""; 48 for(var i=0;i<hang1.length;i++) 49 { 50 var lie = hang1[i].split("^"); 51 str1 = str1 +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>" ; 52 } 53 $("#shi").html(str1); 54 } 55 }) 56 57 }) 58 $(document).ready(function(e) { 59 var c = $("#shi").val(); 60 $.ajax({ 61 async:false, 62 url:"0513qucl.php", 63 data:{c1:c}, 64 type:"POST", 65 dataType:"TEXT", 66 success: function(data2){ 67 var hang2 = data2.split("|"); 68 var str2=""; 69 for(var i=0;i<hang2.length;i++) 70 { 71 var lie = hang2[i].split("^"); 72 str2 = str2 +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>" ; 73 } 74 $("#qu").html(str2); 75 } 76 }) 77 78 }); 79 80 81 //改变 82 83 $("#sheng").click(function(){ 84 $(document).ready(function(e) { 85 86 var b = $("#sheng").val(); 87 //alert(b); 88 $.ajax({ 89 async:false, 90 url:"0513shicl.php", 91 data:{b1:b}, 92 type:"POST", 93 dataType:"TEXT", 94 success: function(data1){ 95 var hang1 = data1.split("|"); 96 var str1=""; 97 for(var i=0;i<hang1.length;i++) 98 { 99 var lie = hang1[i].split("^"); 100 str1 = str1 +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>" ; 101 } 102 $("#shi").html(str1); 103 } 104 }) 105 106 }) 107 108 $(document).ready(function(e) { 109 //alert(c); 110 var c = $("#shi").val(); 111 $.ajax({ 112 async:false, 113 url:"0513qucl.php", 114 data:{c1:c}, 115 type:"POST", 116 dataType:"TEXT", 117 success: function(data2){ 118 var hang2 = data2.split("|"); 119 var str2=""; 120 for(var i=0;i<hang2.length;i++) 121 { 122 var lie = hang2[i].split("^"); 123 str2 = str2 +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>" ; 124 } 125 $("#qu").html(str2); 126 } 127 }) 128 129 }); 130 }) 131 $("#shi").click(function(){ 132 //alert(c); 133 var c = $("#shi").val(); 134 $.ajax({ 135 async:false, 136 url:"0513qucl.php", 137 data:{c1:c}, 138 type:"POST", 139 dataType:"TEXT", 140 success: function(data2){ 141 var hang2 = data2.split("|"); 142 var str2=""; 143 for(var i=0;i<hang2.length;i++) 144 { 145 var lie = hang2[i].split("^"); 146 str2 = str2 +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>" ; 147 } 148 $("#qu").html(str2); 149 } 150 }) 151 152 }); 153 </script> 154 </html>
处理页面，写了三个，因为相似就给了一个
<?php require "DBDA.class.php"; $db = new DBDA(); $sql = "select AreaCode,AreaName,ParentAreaCode from chinastates where ParentAreaCode=‘0001‘"; $arr = $db->StrQuery($sql); echo $arr;
以上是关于三级联动的主要内容，如果未能解决你的问题，请参考以下文章