Home > Article > Web Front-end > Using ajax to realize three-level linkage of menu bar

Using ajax to realize three-level linkage of menu bar

php中世界最好的语言Original: 2018-03-30 17:32:191652browse

This time I will bring you the use of ajax to realize the third-level linkage of the menu bar. What are the precautions for using ajax to realize the third-level linkage of the menu bar? The following is a practical case, let's take a look.

Main page code

<!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>")
          }
        }
      })
    })
  })

Processing page code

<?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);

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!

Using ajax to realize three-level linkage of menu bar

Related articles