您现在的位置是：网站首页> 编程资料编程资料
ajax实现三级联动的基本方法_AJAX相关_
2023-05-25
242人已围观
简介 ajax实现三级联动的基本方法_AJAX相关_
本文实例为大家分享了ajax实现三级联动的具体代码，供大家参考，具体内容如下
1.首先在一个页面上布置一个div 方便日后引用方法
//div的id为“sanji”
2.sanji js处理页面
$(document).ready(function(){ //向div里面放三个下拉菜单 var str = ""; //给三个下拉列表定义 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 +=""; } $("#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"+lie[1]+""; } $("#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"+lie[1]+""; } $("#qu").html(str); } }); } 4.chuli页面
StrQuery($sql);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
