简单实现ajax三级联动效果

栏目: 编程语言 · JavaScript · jQuery · 发布时间: 8年前

内容简介：这篇文章主要教大家简单实现ajax三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了ajax三级联动效果展示的具体代码，供大家参考，具体内容如下

主页面代码

<!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='"+ data[i][2] +"'>" + 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='" + data[i][2] +"'>" + 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='" +data[i][2] +"'>" +data[i][1] +"</option>")
          }
        }
      })
    })
  })

处理页面代码

<?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['parent_id']}";
$result = $db->Query($sql);
echo json_encode($result);

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web Data Mining

Bing Liu / Springer / 2006-12-28 / USD 59.95

Web mining aims to discover useful information and knowledge from the Web hyperlink structure, page contents, and usage data. Although Web mining uses many conventional data mining techniques, it is n......一起来看看《Web Data Mining》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具

RGB CMYK 互转工具