PHP ajax 实现三级联动

Posted 2020-07-09 冷风~云

在一个单独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>