jquery+ajax+php+json三级联动

2010-12-03 10:49:13

城市——区域——街道

jquery部分：

$(document).ready(function(){ var ab = {1:"北京",2:"山东",3:"辽宁"}; $.getJSON('http://localhost/mds/html/default/samples/ge.php',{'myinfo':ab }, function(json) { var html=""; var ht=""; var htt=""; $.each(json, function(k, i) { html += '<option value="' + k + '">' + i + '</option>'; ht += '<option value="' + k + '">' + "北京" + '</option>'; }); $("#b3").html(html); $("#b2").html(ht); }); $("#b3").click(function(){ var s=$("#b3").val(); $.getJSON('http://localhost/mds/html/default/samples/gr.php',{'shi':s }, function(json) { var html=""; $.each(json, function(k, i) { html += '<option value="' + k + '">' + i + '</option>'; }); $("#b2").html(html); }); }); $("#b2").click(function(){ var s=$("#b2").val(); $.getJSON('http://localhost/mds/html/default/samples/gq.php',{'qu':s }, function(json) { var html=""; $.each(json, function(k, i) { html += '<option value="' + k + '">' + i + '</option>'; }); $("#b4").html(html); }); }); });

 

使用jquery的ajax方法，这样写比较简洁而且看的也很明朗，传参以json形式，也可以换成$.post()  & $.get()

 

php 接受部分

<?php $q=$_GET['qu']; if($q=='6'){//swich $str = array("0"=>'和平区',"1"=>"皇姑区","2"=>"东陵区"); echo json_encode($str); }elseif($q=='7'){ $str = array("0"=>'振兴区', "1"=>'元宝区'); echo json_encode($str); }elseif($q=='5'){ $str =array("0"=>'甘井子区',"1"=>"中山区","2"=>"沙河口区","3"=>"西岗区"); echo json_encode($str); }elseif($q=='0'|| $q=='1'){ $str =array("0"=>'海淀区',"1"=>"朝阳区","2"=>"西城区","3"=>"崇文区"); echo json_encode($str); }else{ $str =array("0"=>'暂无资料'); echo json_encode($str); } ?> ge.php <?php $q=$_GET["myinfo"]; echo json_encode($q); ?>

html页面的代码就略过了~