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);
ajax 三级联动写法的更多相关文章
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区
使用AJAX + 三级联动 实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...
- AJAX 三级联动
新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- 0509 关于Ajax + 三级联动示例
关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...
- [Ajax三级联动 无刷新]
三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...
- 2019.03.25 Ajax三级联动
所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 from django.core import serialize ...
- ajax 三级联动商品分类（转载）
转载 自 jines http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...
- Ajax三级联动
全国省市县查询 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- VS单元测试"未能加载文件或程序集,或它的某一个依赖项"
Autofac.Core.DependencyResolutionException : An error occurred during the activation of a particular ...
- BZOJ 1724 USACO 2006 Nov. 切割木板
倒过来的合并果子? 做法与合并果子一样 维护一个小根堆,每次取出最小的两个数进行合并 #include<cstdio> #include<algorithm> #include ...
- PAT 1098. Insertion or Heap Sort
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- C# 派生类的XmlSerializer序列化XML
近段对XML 序列化进行处理,用XmlSerializer这个挺好用的. 但是对于派生类对象的XML的生成总会报错.因为同一个节点名称,不能反射为不同的对象.这个在网上找了好久,都说要利用反射来处理. ...
- Redis学习总结（2）——Java使用Redis
安装 开始在 Java 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 Java redis 驱动,且你的机器上能正常使用 Java. Java的安装配置可以参考我们的 Java ...
- mysql 数据的某个范围数据
select * from table_name where limit num1, num2; num1 : 开始条目 num2 :选择数目
- Python 4 循环语句while
while [条件]: 条件这里满足布尔运算True则无限循环while里面代码. 固定条件的 基本的while循环, 如果if匹配那么 则执行打印登录成功,和break跳出整个循环, ...
- poj 1860 bellman 求正环
#include<stdio.h> #include<string.h> #include<queue>//只需判断是否有正环路径就可以了 using namesp ...
- CodeForces - 284C - Cows and Sequence
先上题目: C. Cows and Sequence time limit per test 3 seconds memory limit per test 256 megabytes input s ...
- jQuery学习之二 jQuery选择器
一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制 传统js选择器假如要操作的元素不存 ...