Home >Backend Development >PHP Tutorial >Simple method to realize ajax three-level linkage effect

Simple method to realize ajax three-level linkage effect

小云云Original: 2017-12-25 09:32:491558browse

This article mainly teaches you how to simply implement the three-level linkage effect of ajax. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

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: &#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] +"</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);

Related recommendations:

Use vue.js to imitate the selection component of JD.com’s three-level linkage between provinces and municipalities

PHP+MySql+Ajax+jQuery combines to realize the three-level linkage between provinces and municipalities Linkage function

javascript three-level linkage video data sharing

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of ajax implementation of input prompt effect exampleNext article：Detailed explanation of ajax implementation of input prompt effect example

See more

Simple method to realize ajax three-level linkage effect

Related articles