您好,欢迎访问一九零五行业门户网

ajax实现三级联动(附代码)

这次给大家带来ajax实现三级联动(附代码),ajax实现三级联动的注意事项有哪些,下面就是实战案例,一起来看一下。
1.首先在一个页面上布置一个p 方便日后引用方法
<body> <p id="sanji">//p的id为“sanji” </p>
2.sanji js处理页面
$(document).ready(function(){    //向p里面放三个下拉菜单   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 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 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如何做出页面局部跳转功能
jquery里ajax.load()方法应如何使用
以上就是ajax实现三级联动(附代码)的详细内容。
其它类似信息

推荐信息