ajax three-level linkage drop-down menu

ajax writes three-level linkage, first write a file class, then call it directly when you use it.

Look for a table:

Realization:

China's three regional movements: provinces, cities and districts;

Figure:

Talk about the train of thought:

(1) trigger an event when the user chooses a province, and send the id of the current province to the server program by issuing a request through ajax

(2) Take China as an example. China is 0001, so the area with its own number 0001 is China.

The code number of Beijing is 11, and the code number of children is 11, which is the urban area of Beijing.

That is to say, query the child code according to the main code;

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

The display page is very simple, just need a div and introduce 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>Untitled document</title>
    <script src="jquery-1.11.2.min.js"></script>
    <script src="sanji.js"></script>
</head>
<body>
<h1>Three level linkage</h1>
<div id="sanji"></div>
</body>
</html>

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

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

$(document).ready(function(e){
    //Three drop-down lists
    //Load display data
    $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");
    //Loading Province

    FillSheng();
    //Loading City
    FillShi();
    //Loading area
    FillQu();
}

Next, write the method.

The three menus are linked, that is, different options can be selected according to different provinces.

Instead of click () on the event, use the change () event that is executed when the state is changed.

(1) When provinces change:

，

 //When provinces change
    $("#sheng").change(function(){
        FillShi();

        FillQu();
    })

Change in urban areas, districts and counties

(2) When the urban area changes:

 //When the city changed
    $("#shi").change(function(){
        FillQu();
    })
});

Changes have taken place in districts and counties.

There is nothing wrong with this logic.

Next, the provincial information is loaded roughly, and at the end of the traversal of ajax, the value is written into the drop-down menu of the market:

//Loading Provincial Information
function FillSheng()
{
    //According to the parent code
    //Take the parent code
    var pcode = "0001";
    //Look up data based on parent code
    $.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 = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
    }
    $("#sheng").html(str);
}
    });
}

//Loading City
function FillShi()
{
    //According to the parent code
    //Take the parent code
    var pcode = $("#sheng").val();
    //Look up data based on parent code
    $.ajax({
        async:false,
        //Cancel asynchronous
        url:"cl.php",
        data:{pcode:pcode},
        type:"POST",
        dataType:"JSON",
    success:function(data)
{
    var str = "";
    for(var sj in data)
    {

        str = str+"<option value = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
    }
    $("#shi").html(str);
}
});
}
//Loading area
function FillQu()
{
    //According to the parent code
    //Take the parent code
    var pcode = $("#shi").val();
    //Look up data based on parent code
    $.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 = '"+data[sj].AreaCode+"'>"+data[sj].AreaName+"</optiom>";
    }
    $("#qu").html(str);
}
});
}

The format here used to be JSON and used "TEXT" before.

Note: JSON

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

We use arrays, so we need to traverse the arrays, get every piece of data, traverse the arrays in js.

for(var sj in data)

{

}

To traverse the array. Format!!!

Let's write down the file encapsulation class mentioned above and find the class that we used to connect to the database.

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);
//Remove the last vertical line
        }
        else
        {
            return $r;
        }
    }
}

Yes, that's right.

Processing pages:

Finally, we will deal with the page:

<?php
$pcode = $_POST["pcode"];
include ("db.class.php");
$db = new db();

$sql = "select * from chinastates where ParentAreaCode = '{$pcode}'";
echo $db->jsonQuery($sql);

Connect to database, object call class, write sql statement and return directly to Oak!!!

It's so short!

Design sketch:

Posted by ayzee on Wed, 17 Apr 2019 19:45:34 -0700

Programmer Group

ajax three-level linkage drop-down menu

Hot Keywords