ajax实现三级联动的基本方法

前端  /  管理员 发布于 4年前   408

本文实例为大家分享了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页面

<?phpinclude("DBDA.class.php");$db = new DBDA();$pcode = $_POST["pcode"];$sql = "select * from chinastates where parentareacode='{$pcode}'";echo $db->StrQuery($sql);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


  • 上一条：
    ASP.NET配合jQuery解决跨域调用的问题
    下一条：
    js正则表达式之replace函数用法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客