Using ajax to realize three-level linkage of menu bar

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

nbsp;html>


  <meta>
  <title>Title</title>
  <script></script>


<select>
  <option>请选择</option>
</select>
<select>
  <option>请选择</option>
</select>
<select>
  <option>请选择</option>
</select>


<script>
  $.ajax({
    data: {parent_id: 0}, //发送的数据
    dataType: "json", //返回值的类型 text为string型
    type: &#39;post&#39;,  //发送请求的方法(get)
    url: &#39;sheng_l.php&#39;,//发送请求的地址
    success: function (data) {//发送成功时的回调函数
  //      console.log(data);
      for (var i in data) {
        $("#sheng").append("<option value=&#39;"+ data[i][2] +"&#39;>" + data[i][1] +"")
      }
    }
  })
  $(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] +"")
          }
        }
      })
    })
  })
  $(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] +"")
          }
        }
      })
    })
  })</script>

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!

Recommended reading:

How to use Ajax to asynchronously check whether the user name is duplicated

ajax is performed using $.post method Username verification

The above is the detailed content of Using ajax to realize three-level linkage of menu bar. For more information, please follow other related articles on the PHP Chinese website!