ajax实现三级联动的基本方法
本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考，具体内容如下
1.首先在一个页面上布置一个div 方便日后引用方法
<body> <div id="sanji">//div的id为“sanji” </div>
2.sanji js处理页面
$(document).ready(function(){
//向div里面放三个下拉菜单
var str = "<select id='sheng'></select>
<select id='shi'></select>
<select id='qu'></select>";
//给三个下拉列表定义 str 变量
$("#sanji").html(str);
FillSheng();
FillShi();
FillQu();//Sheng Shi Qu的逻辑顺序
$("#sheng").change(function(){
FillShi();
FillQu();
})//给sheng菜单添加点击事件
$("#shi").change(function(){
FillQu();
})//给shi菜单添加点击事件
});//页面加载完成之后过来执行某些代码
3.填充sheng方法
function FillSheng()
{
var pcode = "";//定义一个变量
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success:function(data){
var hang = data.split("^");
str +="<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str);
});
}
2.填充shi方法
function FillShi()
{
var pcode = $("#sheng").val();
$.ajax({
async:false,
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
3.填充qu方法
function FillQu()
{
var pcode = $("#shi").val();
$.ajax({
url:"chuli.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}
4.chuli页面
<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ajax三级联动实现代码
本文实例为大家分享了ajax三级联动展示的具体代码,供大家参考,具体内容如下 1. test.php <script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> <title>无标题文档</title> </head> <body> <h1>三级联动</
-
AJAX省市区三级联动下拉菜单(java版)
此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){ $.get("getProvince.do", function(result){ $("#showp").html(result); }); }) var xmlhttp; function mysend(str){ $(docum
-
Ajax商品分类三级联动的简单实现(案例)
思路分析: 效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 页面效果: $(functi
-
asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
本文主要列举了省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例.前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅. 在示例之前,我们先设置一个演示数据源,新建一个项目,项目结构如图: 主要文件如下:AreaModel.cs: 复制代码 代码如下: using System; using System.Collections.Generi
-
ajax实现无刷新省市县三级联动
本文实例为大家分享了ajax实现无刷新省市县三级联动的具体代码,供大家参考,具体内容如下 效果图: 实现代码: 1.html: <html> <head> <title></title> <style type="text/css"> select { width: 150px; } </style> <script src="js/Jquery1.7.js" type="tex
-
ajax.net +jquery 无刷新三级联动的实例代码
复制代码 代码如下: <!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> <title></titl
-
Ajax+php实现商品分类三级联动
当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现: 1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值 2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值 3.当选择二级商品时加载pid=当前id的商品,并创建option将商品追加到三级菜单中,并设置value值 页面效果: $(function(){ //
-
PHP+Mysql+Ajax+JS实现省市区三级联动
基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省.市.区获取方法类似,PHP中通过参数不同执行不同的select语句. index.html代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh
-
jquery+ajax实现省市区三级联动效果简单示例
本文实例讲述了jquery+ajax实现省市区三级联动效果.分享给大家供大家参考,具体如下: 一直想学习下Ajax,没时间,汗,这借口太牵强了.下了点教程在手机里,翻了好几遍了,没实战一次. 最近的项目里需要Ajax实现效果,就下了个jquery,然后找了个实例,学习了一下,幡然醒悟,NND,jquery果然强大的一塌糊涂,实现Ajax简直就是不费吹灰之力.下面把学习过程跟大家分享下,虽然还没有搞清楚jquery ajax的底层相关.不管了.我们不需要去发明轮子.呵呵. 先上代码,是一个省市区三
-
AJAX和WebService实现省市县三级联动具体代码
-------------------------------------WebService1.asmx--------------------------------------- 复制代码 代码如下: // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] public class WebService1 : System.Web.Services.WebServ