Exemple de code pour implémenter le menu déroulant de liaison à trois niveaux ajax-tutoriel php-php.cn

Exemple de code pour implémenter le menu déroulant de liaison à trois niveaux ajax

高洛峰

Libérer： 2023-03-06 18:54:01

original

3679 Les gens l'ont consulté

Cet article présente l'exemple de code pour implémenter le menu déroulant de liaison à trois niveaux ajax

Ajax écrit une liaison à trois niveaux d'abord. Classe de fichier, vous pouvez l'appeler directement lorsque vous l'utiliserez à l'avenir

Trouver une table :

Mise en œuvre :

Trois régions de Chine Lien en cascade : province, ville, district

Photo :

Parlons de l'idée :

(1) Lorsque l'utilisateur sélectionne une province, un événement est déclenché et l'identifiant de la province actuelle est envoyé au service via une requête ajax. Dans le programme du terminal

(2) Par exemple, si vous prenez la région chinoise, la Chine est 0001, puis celle avec le construit- au numéro 0001 est la région chinoise

Le code de Pékin est 11, puis le sous-code 11 est la zone urbaine de Pékin,

C'est-à-dire interroger le sous-code en fonction du code principal Nom du code

(3) Le serveur interroge ; la base de données selon la demande du client et la renvoie au client dans un certain format

L'affichage de la page est très simple, il suffit d'un p et d'introduire les fichiers js et jquery :

<!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>

Copier après la connexion

J'ai besoin de sélectionner trois listes déroulantes et de donner la méthode d'écriture de l'identifiant

Écrivez d'abord trois listes déroulantes avec l'identifiant et exécutez les trois méthodes :

$(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();
}

Copier après la connexion

Suivant , écrivez la méthode

Les trois menus sont liés, c'est-à-dire qu'il existe différentes options selon les différentes provinces

N'utilisez pas les événements de clic click() ici ; utilisez les modifications effectuées lorsque l'état est modifié. Event change()

. (1) Lorsque la province change :

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

        FillQu();
    })

Copier après la connexion

Les zones urbaines, les districts et les comtés changent

(2) Quand les zones urbaines changent :

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

Copier après la connexion

Les districts et les comtés ont changé

Il n'y a rien de mal avec la logique

L'étape suivante consiste à charger grossièrement les informations sur la province, et à la fin du parcours ajax, la valeur est écrite dans le menu déroulant de la ville :

//加载省份信息
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);
}
});
}

Copier après la connexion

Le format ici est JSON. Avant c'était "TEXTE"

Remarque : JSON

JSON est une syntaxe pour transmettre des objets. Il s'agit de paires nom/valeur, de tableaux et d'autres objets <🎜. >

Nous utilisons un tableau, nous devons donc parcourir le tableau et obtenir Pour chaque élément de données, la méthode utilisée pour parcourir le tableau en js est

for(var sj in data)

{

}

pour itérer sur le tableau. Format! ! !

这里来写上面说的那个文件封装类，找到我们以前我们的连接数据库的类：

加上这段：

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;
        }
    }
}

Copier après la connexion

嗯，没错

处理页面：

最后来说处理页面：

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

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

Copier après la connexion

连上数据库，对象调用类，写完sql语句直接返回就欧克！！！

就是这么短！

效果图：