Utiliser ajax pour réaliser une liaison à trois niveaux de la barre de menus-js tutoriel-php.cn

Utiliser ajax pour réaliser une liaison à trois niveaux de la barre de menus

php中世界最好的语言

Libérer： 2018-03-30 17:32:19

original

1721 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation d'ajax pour réaliser la liaison de troisième niveau de la barre de menus. Quelles sont les précautions pour utiliser ajax pour réaliser la liaison de troisième niveau de la barre de menus. Ce qui suit est un cas pratique, jetons-y un œil.

Code de la page principale

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../wenjian/jquery-2.2.3.min.js"></script>
</head>
<body>
<select id="sheng">
  <option>请选择</option>
</select>
<select id="shi">
  <option >请选择</option>
</select>
<select id="qu">
  <option >请选择</option>
</select>
</body>
</html>
<script>
  $.ajax({
    data: {parent_id: 0}, //发送的数据
    dataType: "json", //返回值的类型 text为string型
    type: 'post',  //发送请求的方法(get)
    url: 'sheng_l.php',//发送请求的地址
    success: function (data) {//发送成功时的回调函数
  //      console.log(data);
      for (var i in data) {
        $("#sheng").append("<option value=&#39;"+ data[i][2] +"&#39;>" + data[i][1] +"</option>")
      }
    }
  })
  $(document).ready(function () {
    $("#sheng").change(function () {
      $("#shi").get(0).options.length= 1;
//      $("#qu").get(0).options.length= 1;
      var data = $("#sheng").find("option:selected").val();
      $.ajax({
        data:{parent_id:data},
        type:"post",
        dataType:"json",
        url:"sheng_l.php",
        success:function (data) {
          for(var i in data){
            $("#shi").append("<option value=&#39;" + data[i][2] +"&#39;>" + data[i][1] +"</option>")
          }
        }
      })
    })
  })
  $(document).ready(function () {
    $("#shi").change(function () {
      $("#qu").get(0).options.length= 1;
      var data = $("#shi").find("option:selected").val();
      $.ajax({
        data:{parent_id:data},
        type:"post",
        dataType:"json",
        url:"sheng_l.php",
        success:function (data) {
          for (var i in data){
            $("#qu").append("<option value=&#39;" +data[i][2] +"&#39;>" +data[i][1] +"</option>")
          }
        }
      })
    })
  })

Copier après la connexion

Code de la page de traitement

<?php
/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/29
 * Time: 20:56
 */
require_once "../wenjian/DBDA.class.php";
$db = new DBDA();
$sql = "select * from region WHERE father_id = {$_POST[&#39;parent_id&#39;]}";
$result = $db->Query($sql);
echo json_encode($result);

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Comment utiliser Ajax pour vérifier de manière asynchrone si le nom d'utilisateur est dupliqué

ajax en utilisant $. méthode de publication Vérification du nom d'utilisateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!