三级联动下拉列表——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 ...
随机推荐
- JQuery DOM操作:设置内容&属性&添加元素&插入元素&包裹&克隆&移除&替换
JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...
- vc code js 配置
VSCode (for JS develop) https://www.jianshu.com/p/c56ea43b2b34 前言 编辑器之间的竞争一直也十分的激烈,用过Webstom,Hbuilde ...
- spring boot 配置时区差别
前提 数据库时区:GMT+8 show variables like '%time_zone%'; 本机电脑时区: 情景一.不指定时区 传递的参数映射到Data不指定时区,连接数据库不指定时区,保存时 ...
- Java面向对象编程 -3.3
综合实战 简单Java类 在以后进行项目开发与设计的过程之中,简单Java类都将作为一个重要的组成部分存在,慢慢接触到正规的项目设计后, 简单Java类无处不再,并且有可能产生一系列的变化. 所谓的简 ...
- Java面向对象编程 -3
this关键字 this可以算是Java里面比较复杂的关键字,因为this的使用形式约定了它的灵活性,在程序里面,使用this可以实现以下三类结构的描述: 当前类中的属性:this属性; 当前类中的方 ...
- 什么是函数,干嘛啊,怎么干。一个py程序员的视角.md
目录 前言 本质 math definition py definition class 是类,是对象的蓝本 回到函数 一个结论 self 是什么? 以上就是py世界里函数的定义 什么是函数,干嘛啊, ...
- redis使用技巧小结
一.Redis 密码设置和查看密码redis没有实现访问控制这个功能,但是它提供了一个轻量级的认证方式,可以编辑redis.conf配置来启用认证.1.初始化Redis密码:在配置文件中有个参数:re ...
- Spring AOP 中 advice 的四种类型 before after throwing advice around
spring AOP(Aspect-oriented programming) 是用于切面编程,简单的来说:AOP相当于一个拦截器,去拦截一些处理,例如:当一个方法执行的时候,Spring 能够拦截 ...
- Python笔记4
JSON: JavaScript Object Notation, JavaScript 对象标记 JSON 本质:是一种轻量级的数据交换格式 1. 轻量级 是 和 XML作比较 2. 数据交换格式 ...
- extractvalue报错注入
查看源码 $uagent = $_SERVER['HTTP_USER_AGENT']; ………… $uname = check_input($_POST['uname']); $passwd = ch ...