Ajax three-level linkage drop-down menu implementation (with code)-JS Tutorial-php.cn

Ajax three-level linkage drop-down menu implementation (with code)

php中世界最好的语言

Release： 2018-04-02 11:09:52

Original

6602 people have browsed it

This time I will bring you the three-level linkage of ajax Drop-down menu Implementation (with code), what are the precautions to implement the ajax three-level linkage drop-down menu, the following is the actual combat Let’s take a look at the case.

To write three-level linkage with ajax, write a file class first, and then call it directly when you use it later;

Find a table:

Realization:

Three-level linkage in China: province, city, district;

Picture:

## Let’s talk about the idea:

(1) When the user selects a province, the event is triggered and the current province id is passed through ajax The request is sent to the program on the server

(2) For example, if the Chinese region is taken, China is 0001, then the one with the number 0001 is the Chinese region;

The code name of Beijing is 11, so the sub-code number 11 is the urban area of Beijing.

That is to say, the sub-code number is queried based on the main code number;

(3 ) The server queries the database according to the client's request, and returns it to the client in a certain format

The display page is very simple, it only requires a p, and introduces js and jquery files:

<!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" />
  <title>无标题文档</title>
  <script src="jquery-1.11.2.min.js"></script>
  <script src="sanji.js"></script>
</head>
<body>
<h1>三级联动</h1>
<p id="sanji"></p>
</body>
</html>

Copy after login

I need to select three drop-down boxes and give them id writing methods

First write three drop-down boxes with ids and execute three methods:

$(document).ready(function(e){
  //三个下拉列表
  //加载显示数据
  $("#sanji").html("<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></select>");
  //加载省份
  FillSheng();
  //加载市
  FillShi();
  //加载区
  FillQu();
}

Copy after login

Next Write the method;

The three menus are linked, that is, there are different options according to different provinces

Don’t use click() click event here; use it to execute when changing the state The change event change()

(1) When the province changes:

 //当省份发生变化
  $("#sheng").change(function(){
    FillShi();
    FillQu();
  })

Copy after login

Urban area, district and county change

(2) When the urban area changes ：

//当市发生改变
  $("#shi").change(function(){
    FillQu();
  })
});

Copy after login

Districts and counties have changed;

There is nothing wrong with this logic;

The next step is to load the province information roughly, and at the end of the ajax traversal, The value is written into the city's drop-down menu:

//加载省份信息
function FillSheng()
{
  //根据父级代号
  //取父级代号
  var pcode = "0001";
  //根据父级代号查数据
  $.ajax({
    async:false,
    url:"cl.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
    success:function(data)
{
  var str = "";
  for(var sj in data)
  {
    str = str+"<option value = &#39;"+data[sj].AreaCode+"&#39;>"+data[sj].AreaName+"</optiom>";
  }
  $("#sheng").html(str);
}
  });
}
//加载市
function FillShi()
{
  //根据父级代号
  //取父级代号
  var pcode = $("#sheng").val();
  //根据父级代号查数据
  $.ajax({
    async:false,
    //取消异步
    url:"cl.php",
    data:{pcode:pcode},
    type:"POST",
    dataType:"JSON",
  success:function(data)
{
  var str = "";
  for(var sj in data)
  {
    str = str+"<option value = &#39;"+data[sj].AreaCode+"&#39;>"+data[sj].AreaName+"</optiom>";
  }
  $("#shi").html(str);
}
});
}
//加载区
function FillQu()
{
  //根据父级代号
  //取父级代号
  var pcode = $("#shi").val();
  //根据父级代号查数据
  $.ajax({
    url:"cl.php",
    data:{pcode:pcode},
  type:"POST",
    dataType:"JSON",
  success:function(data)
{
  var str = "";
  for(var sj in data)
  {
    str = str+"<option value = &#39;"+data[sj].AreaCode+"&#39;>"+data[sj].AreaName+"</optiom>";
  }
  $("#qu").html(str);
}
});
}

Copy after login

The format here is JSON. Previously, "TEXT" was used

Note: JSON

JSON is a syntax for passing objects. The objects can be name/value pairs, arrays and other objects

We are using arrays, then we need to

Traverse the array, to get each piece of data, the method used to traverse the array in js is

for(var sj in data)

{

}

to traverse the array. Format! ! !

Let’s write the file encapsulation class mentioned above, and find our previous

Connect database class:

Add this paragraph:

public function jsonQuery($sql,$type=1)
  {
    $db = new mysqli($this->host,$this->zhang,$this->mi,$this->dbname);
    $r = $db->query($sql);
    if($type == "1")
    {
      $arr = $r->fetch_all(MYSQLI_ASSOC);
      return json_encode($arr);
//去掉最后竖线
    }
    else
    {
      return $r;
    }
  }
}

Copy after login

Well, that's right

Processing page:

Finally, the processing page:

<?php
$pcode = $_POST["pcode"];
include ("db.class.php");
$db = new db();
$sql = "select * from chinastates where ParentAreaCode = &#39;{$pcode}&#39;";
echo $db->jsonQuery($sql);

Copy after login

Connect to the database, call the object class, and return directly to Ouke after writing the sql statement ! ! !

It’s so short!

Rendering:

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!