PHP ajax 实现三级联动

在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用

JS代码:

  1 $(document).ready(function(e) {
  2     $("#sanji").html("<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>");
  3
  4     //填充内容
  5     //填充省
  6     FileSheng();
  7     //填充市
  8     FileShi();
  9     //填充区
 10     FileQu();
 11
 12     $("#sheng").change(function(){
 13
 14         //当省变化的时候去调用市和区
 15         FileShi();
 16         FileQu();
 17
 18         })
 19     $("#shi").change(function(){
 20
 21         //当市变化的时候去调用区
 22         FileQu();
 23
 24         })
 25     //调用省的方法
 26     function FileSheng()
 27     {
 28         //找到父级代号
 29          var pcode = "0001";
 30         //调用AJAX
 31         $.ajax({
 32             async:false,
 33             url:"ChuLi.php",
 34             data:{pcode:pcode},
 35             type:"POST",
 36             dataType:"TEXT",
 37             success: function(data){
 38
 39                 var str = "";
 40                 var hang = data.split("|");
 41                 for(var i=0; i<hang.length; i++)
 42                 {
 43                     var lie = hang[i].split("^");
 44                     str += "<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
 45                 }
 46                 $(a).html(str);
 47                 }
 48
 49             });
 50     }
 51     //填充市的方法
 52     function FileShi()
 53     {
 54         //找到父级代号
 55         var pcode = $("#sheng").val();
 56         //调用AJAX
 57         $.ajax({
 58             async:false,
 59             url:"ChuLi.php",
 60             data:{pcode:pcode},
 61             type:"POST",
 62             dataType:"TEXT",
 63             success: function(data){
 64
 65                 var str = "";
 66                 var hang = data.split("|");
 67                 for(var i=0; i<hang.length; i++)
 68                 {
 69                     var lie = hang[i].split("^");
 70                     str += "<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
 71                 }
 72                 $("#shi").html(str);
 73
 74                 }
 75         });
 76     }
 77     function FileQu()
 78     {
 79         //找到父级代号
 80         var pcode = $("#shi").val();
 81         //调用AJAX
 82         $.ajax({
 83             async:false,
 84             url:"ChuLi.php",
 85             data:{pcode:pcode},
 86             type:"POST",
 87             dataType:"TEXT",
 88             success: function(data){
 89
 90                 var str = "";
 91                 var hang = data.split("|");
 92                 for(var i=0; i<hang.length; i++)
 93                 {
 94                     var lie = hang[i].split("^");
 95                     str += "<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>";
 96                 }
 97                 $("#qu").html(str);
 98
 99                 }
100         });
101     }
102
103
104
105 });

这样在一个<div>里就可以实现随时调用三级联动

1 <div id="sanji"></div>

时间: 2024-10-28 16:42:32

PHP ajax 实现三级联动的相关文章

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){   

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

Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理程序路径 data: { "name": name },//要传输的数据,冒号前面是键名后面是要传输的数据,如果有多条数据在大括号内用逗号拼接 type: "post",//传输方式 dataType: "json",//返回数据类型 success

Jquery Ajax + php 三级联动实例

sanji.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

ajax省市区三级联动

jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博客讲解是按照两级联动,但下载的资源是三级联动含sql文件. 效果图: 首页核心代码: [html] view plain copy <% List<HashMap<String,Object>> maps = ConnectionUtil.findProvinces(); pag

用ajax实现三级联动

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

AJAX实现三级联动

省市区三级联动插件: 主页面:为方便使用,不用写过多代码,只写一个id为sanji的div,若别的页面要用,只需写一个id为sanji的div,加载上jQuery与sanji.js文件即可 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

ajax实现三级联动下拉菜单

先不要着急去实现功能,我们第一步首先要理清思路,想要实现三级联动,首先要有三个下拉框,然后点击第一个下拉菜单,可以联动到第二个,点击第二个联动到第三个,实现省市区的三级联动,用到的数据表如下: 为了以后可以随时拿出来用,我们先在主页面建立一个div叫sanji,然后用一个js页面来引用: 主页面引入Jquery和js: <title>无标题文档</title> <script src="jquery-3.2.0.min.js"></script

ajax地址三级联动下拉表

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <

Ajax商品分类三级联动实现

思路分析: 效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 页面效果: 1 $(func