三级联动下拉列表——php 、Ajax
主页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="sheng">
<option>请选择</option>
</select>
<select id="shi">
<option>请选择</option>
</select>
<select id="xian">
<option>请选择</option>
</select>
<script src="../js/jquery-2.2.3.min.js"></script>
<script>
$.ajax({
data: {parent_id: 0}, //发送的数据
dataType: "json", //返回值的类型 text为string型
type: 'post', //发送请求的方法(get)
url: 'sheng.php',//发送请求的地址
success: function (data) {//发送成功时的回调函数
// console.log(data);
for (var i in data) {
$("#sheng").append("<option value='"+ data[i][2] +"'>" + data[i][1] +"</option>")
}
}
}) $("#sheng").change(function(){
$("#shi").get(0).options.length=1;
var data = $("#sheng").find("option:selected").val();
$.ajax({
data: {parent_id: data}, //发送的数据
dataType: "json", //返回值的类型 text为string型
type: 'post', //发送请求的方法(get)
url: 'sheng.php',//发送请求的地址
success: function (data) {//发送成功时的回调函数
for (var i in data) {
$("#shi").append("<option value='"+ data[i][2] +"'>" + data[i][1] +"</option>")
}
}
})
}) $("#shi").change(function(){
$("#xian").get(0).options.length= 1;
var data = $("#shi").find("option:selected").val();
$.ajax({
data: {parent_id: data}, //发送的数据
dataType: "json", //返回值的类型 text为string型
type: 'post', //发送请求的方法(get)
url: 'sheng.php',//发送请求的地址
success: function (data) {//发送成功时的回调函数
for (var i in data) {
$("#xian").append("<option value='"+ data[i][2] +"'>" + data[i][1] +"</option>")
}
}
})
})
</script>
</body>
</html> 处理页面sheng.php:
<?php
require_once "../db/DBDA.class.php";
$db = new DBDA();
$sql = "select * from region WHERE father_id = {$_POST['parent_id']}";
$result = $db->Query($sql);
echo json_encode($result);
?>
三级联动下拉列表——php 、Ajax的更多相关文章
- Java下使用Apache POI生成具有三级联动下拉列表的Excel文档
使用Apache POI生成具有三级联动下拉列表的Excel文档: 具体效果图与代码如下文. 先上效果图: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心业务处理): 此部分包含几个方面: ...
- 省份-城市-区域三级联动【struts2 + ajax +非数据库版】
package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...
- ajax——实现三级联动下拉列表
数据库: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 省市区三级联动(jquery+ajax)(封装和不封装两种方式)-----2017-05-15
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- 【转】纯JS省市区三级联动(行政区划代码更新至2015-9-30)
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
- JAVA EE 中之AJAX 无刷新地区下拉列表三级联动
JSP页面 <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- Ajax实现三级联动(0520)
查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...
- 使用php ajax写省、市、区、三级联动
题目要求: 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用china ...
随机推荐
- 吴裕雄 python 神经网络——TensorFlow 输入数据处理框架
import tensorflow as tf files = tf.train.match_filenames_once("E:\\MNIST_data\\output.tfrecords ...
- 【PAT甲级】1055 The World's Richest (25 分)
题意: 输入两个正整数N和K(N<=1e5,K<=1000),接着输入N行,每行包括一位老板的名字,年龄和财富.K次询问,每次输入三个正整数M,L,R(M<=100,L,R<= ...
- iPhone代工商,谁敢要求苹果赔偿损失?
据外国媒体报道,苹果的首席设计师已准备离职,有相关评论称:库克已经不在把硬件设计放到第一位,整个团队都巧妙地遭遇降级.相信熟悉苹果组织的人都知道,他们一切的核心都是围绕"硬件设计" ...
- CSS背景图片设置
*{ margin:0px; padding:0px; list-style: none; text-decoration: none; font-family: Arial,'Microsoft Y ...
- Redis 简易消息队列
为了保持程序的高效,建议使用ProtoBuf. Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48, ...
- 缓存ViewState减少网络传输
在维护 asp.net webform系统时,某些系统将控件及页面数据都存储在viewstate中,导致在频宽不够时,影响页面加载速度,此时可将viewstate 存储在服务端,减少网络传输. 重写 ...
- MyBatis 入门Demo
新建数据库my_db,新建表student_tb id为主键,不自动递增. 不必插入数据. 下载MyBatis https://github.com/mybatis/mybatis-3/release ...
- linear-gradient()的用法
linear-gradient() 函数用于创建一个线性渐变的 "图像" 它的语法是 background: linear-gradient(direction, color-st ...
- GO判断输入
判断用户密码输入: package main import"fmt" func main(){ var a int var b int fmt.Printf("请输入密码 ...
- Python学习第十五课——类的基本思想(实例化对象,类对象)
类的基本思想 类:把一类事物的相同的特征和动作整合到一起就是类类是一个抽象的概念 对象:就是基于类而创建的一个具体的事物(具体存在的)也是特征和动作整合到一块 对象写法 # 对象写法 def scho ...