The basic method of three-level linkage in AJAX

Time:2020-1-17

The example of this article shares the specific code of Ajax to realize three-level linkage for your reference. The specific content is as follows

1. First, arrange a div on a page to facilitate future reference

<body>
< div > // div ID is "Sanji"
</div>

2. Sanji JS processing page

$(document).ready(function(){
    
   //Put three pull-down menus in the div
  var str = "<select id='sheng'></select>
    <select id='shi'></select>
    <select id='qu'></select>";
  //Define STR variables for three drop-down lists
  
  $("#sanji").html(str);


  FillSheng();
  FillShi();
  Fillqu(); // logical order of Sheng Shi Qu 

  
   $("#sheng").change(function(){

     FillShi();
     FillQu();
   }) // add click event to Sheng menu

   $("#shi").change(function(){
   FillQu();
  }) // add click event to Shi menu


}); // after the page is loaded, execute some code

3. Filling Sheng method

function FillSheng()
{
 
  Var pcode = "; // define a variable
  $.ajax({
     
     url:"chuli.php",
     data:{pcode:pcode},
     type:"POST",
     dataType:"TEXT",
     success:function(data){
              var hang = data.split("^");
              str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";

      }
     $("#sheng").html(str);

     });

}

2. Fill Shi method


function FillShi()
{
 var pcode = $("#sheng").val();
 $.ajax({
   async:false,
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
     }
     $("#shi").html(str);
    }
  });
}

3. Filling Qu method


function FillQu()
{
 var pcode = $("#shi").val();
 $.ajax({
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
     }
     $("#qu").html(str);
    }
  });
}

4. Chuli page


<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.