html

<div id="frame"></div>

js

$(function(){
//拼接省市区下拉框
var str = `<select id='sheng'></select>
<select id='shi'></select>
<select id='qu'></select>`;
$('#frame').html(str);
//页面加载完成后执行省市区显示函数。
sheng();
shi();
qu();
//省市添加改变函数,当这一项改变时下面的项跟着改变
$('#sheng').change(function(){
shi();
qu();
})
$('#shi').change(function(){
qu();
})
})
//省显示函数
function sheng(){
//设置pid为0
var pcode = '0';
var str = '';
//异步进行,pid传入后台,返回的json第0项为id 第1项为地区名
//循环拼接option,放入html
$.ajax({
type:"post",
url:"sjll.php",
async:false,
data:{
pcode:pcode
},
dataType:'json',
success:function(data){
for(var i = 0; i < data.length; i++){
str += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
}
$('#sheng').html(str);
}
});
}
function shi(){
//获取省的id值为市的pid
var pcode = $('#sheng').val();
var str = '';
//异步进行,pid传入后台,返回的json第0项为id 第1项为地区名
//循环拼接option,放入html
$.ajax({
type:"post",
url:"sjll.php",
async:false,
data:{
pcode:pcode
},
dataType:'json',
success:function(data){
for(var i = 0; i < data.length; i++){
str += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
}
$('#shi').html(str);
}
});
}
function qu(){
//获取市的id值为区的pid
var pcode = $('#shi').val();
var str = '';
//异步进行,pid传入后台,返回的json第0项为id 第1项为地区名
//循环拼接option,放入html
$.ajax({
type:"post",
url:"sjll.php",
async:false,
data:{
pcode:pcode
},
dataType:'json',
success:function(data){
for(var i = 0; i < data.length; i++){
str += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
}
$('#qu').html(str);
}
});
}

php

<?php
$db = new MySQLi('localhost','root','1','test');
!mysqli_connect_error() or die ('连接错误');
$db->query('set names utf8');
//获取传值pid
$pcode = $_POST['pcode'];
//查找当前pid下的所有内容
$sql = "select * from dt_area where pid = $pcode";
$res = $db->query($sql);
$attr = $res->fetch_all();
//返回json格式
echo json_encode($attr);
?>

注意:

  这里的ajax使用同步传输方式,因为当省执行完市才能拿到省的id值。

三级联动(ajax同步)的更多相关文章

  1. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  2. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  3. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  4. AJAX实现三级联动

    省市区三级联动插件: 主页面:为方便使用,不用写过多代码,只写一个id为sanji的div,若别的页面要用,只需写一个id为sanji的div,加载上jQuery与sanji.js文件即可 <! ...

  5. 0509 关于Ajax + 三级联动示例

    关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...

  6. ajax之三级联动(省市县)

    ajax可以实现页面的局部刷新. 浏览器创建ajax引擎对象,ajax引擎对象向服务器发送请求,服务器把响应好的数据响应给ajax引擎对象,ajax引擎对象把数据放在合适的位置.       异步:先 ...

  7. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  8. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  9. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  10. Ajax案例:三级联动查询员工的信息(三张表进行内连接)

    需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...

随机推荐

  1. init&initWithFrame&initWithCoder

    //当我们所写的程序里没用用Nib文件(XIB)时,用代码控制视图内容,需要调用initWithFrame去初始化 - (id)initWithFrame:(CGRect)frame { if (se ...

  2. 通过修改路由,或者增加Route属性来控制访问webApi的路径

    可以通过RouteConfig.cs文件中的路由规则来控制 通过为每个方法增加单独的[Route(“api/xx类/xx方法”)]

  3. 多线程与MySQL(十)

    1.1 多线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...

  4. Core Java(七)

    面向对象特性整理 知识点:一. static修饰符 static修饰符可以用来修饰类的成员变量.成员方法和代码块.            . 用static修饰的成员变量表示静态变量,可以直接通过类名 ...

  5. 微信小程序分享朋友圈的实现思路与解决办法

    实现思路 那么既然小程序没有分享到朋友圈的api,我们怎么实现分享到朋友圈呢,下面我介绍一下实现思路. 既然没有捷径,那就走复杂一点的路线,那就是需要用户手动分享到朋友圈,问题又来了,用户手动分享的话 ...

  6. Maven编译、打war包

    Eclipse环境,每次alt+F5刷新Maven项目时,总是会把项目的Java依赖刷新成1.5. 解决办法:在pom中加入如下片段 <plugin> <groupId>org ...

  7. CorelDRAW X8制作金属质感3D立体按钮

    本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...

  8. Java中使用MD5加密的简单实现

    import java.math.BigInteger; import java.security.MessageDigest; import java.security.NoSuchAlgorith ...

  9. redis 篇 - hash

    hash 可以认为是 python 中的字典 field 不允许重复 string类型的field和value的映射表 每个hash可以存储 232 - 1 键值对(40多亿) 方法 hest key ...

  10. [USACO18JAN] Lifeguards S (线段树:扫描线面积)

    扫描线裸题没什么好说的 注意空间不要开小了!!! #include <cstdio> #include <cstring> #include <algorithm> ...