在一个单独JS页面中，利用ajax实现三级联动，做成一个三级联动形式，以便于以后随时调用
JS代码：
1 $(document).ready(function(e) { 2 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 3 4 //填充内容 5 //填充省 6 FileSheng(); 7 //填充市 8 FileShi(); 9 //填充区 10 FileQu(); 11 12 $("#sheng").change(function(){ 13 14 //当省变化的时候去调用市和区 15 FileShi(); 16 FileQu(); 17 18 }) 19 $("#shi").change(function(){ 20 21 //当市变化的时候去调用区 22 FileQu(); 23 24 }) 25 //调用省的方法 26 function FileSheng() 27 { 28 //找到父级代号 29 var pcode = "0001"; 30 //调用AJAX 31 $.ajax({ 32 async:false, 33 url:"ChuLi.php", 34 data:{pcode:pcode}, 35 type:"POST", 36 dataType:"TEXT", 37 success: function(data){ 38 39 var str = ""; 40 var hang = data.split("|"); 41 for(var i=0; i<hang.length; i++) 42 { 43 var lie = hang[i].split("^"); 44 str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 45 } 46 $(a).html(str); 47 } 48 49 }); 50 } 51 //填充市的方法 52 function FileShi() 53 { 54 //找到父级代号 55 var pcode = $("#sheng").val(); 56 //调用AJAX 57 $.ajax({ 58 async:false, 59 url:"ChuLi.php", 60 data:{pcode:pcode}, 61 type:"POST", 62 dataType:"TEXT", 63 success: function(data){ 64 65 var str = ""; 66 var hang = data.split("|"); 67 for(var i=0; i<hang.length; i++) 68 { 69 var lie = hang[i].split("^"); 70 str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 71 } 72 $("#shi").html(str); 73 74 } 75 }); 76 } 77 function FileQu() 78 { 79 //找到父级代号 80 var pcode = $("#shi").val(); 81 //调用AJAX 82 $.ajax({ 83 async:false, 84 url:"ChuLi.php", 85 data:{pcode:pcode}, 86 type:"POST", 87 dataType:"TEXT", 88 success: function(data){ 89 90 var str = ""; 91 var hang = data.split("|"); 92 for(var i=0; i<hang.length; i++) 93 { 94 var lie = hang[i].split("^"); 95 str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; 96 } 97 $("#qu").html(str); 98 99 } 100 }); 101 } 102 103 104 105 });
这样在一个<div>里就可以实现随时调用三级联动
1 <div id="sanji"></div>