ajax+json+php实现三级菜单联动

 实现要点

1.ajax实现局部刷新，菜单联动
2.json实现菜单数据的传输和解析
3.php实现后台数据的组织，ajax请求接收，json数据组织

ajax核心代码

 1 $(function(){
 2             $('#s1').empty();
 3             //$('#s1 option').remove();
 4             $('#s1').append(new Option('==请选择==',''));
 5             $.ajax({
 6                     type:"post",
 7                     url:"s1.php",
 8                     success:function(msg){
 9                         var json= eval('('+msg+')');
10                         for(var i=0;i<json.length;i++){
11                             $('#s1').append(new Option(json[i].value,json[i].key));
12                         }
13                     }
14                 });
15                $('#s1').change(function(){
16                    $('#s2').empty();
17                    $('#s2').append(new Option('==请选择==',''));
18                    $.ajax({
19                     type:"post",
20                     url:"s2.php",
21                     data:'i='+$('#s1').val(),
22                     success:function(msg){
23                         var json= eval('('+msg+')');
24                         for(var i=0;i<json.length;i++){
25                             $('#s2').append(new Option(json[i].value,json[i].key));
26                         }
27                     }
28                 });
29                });
30                $('#s2').change(function(){
31                    $('#s3').empty();
32                    $('#s3').append(new Option('==请选择==',''));
33                    $.ajax({
34                     type:"post",
35                     url:"s3.php",
36                     data:'i='+$('#s2').val(),
37                     success:function(msg){
38                         var json= eval('('+msg+')');
39                         for(var i=0;i<json.length;i++){
40                             $('#s3').append(new Option(json[i].value,json[i].key));
41                         }
42                     }
43                 });
44                });
45         });

 



php核心代码

 1 if(isset($_POST)){
 2     $i=$_POST['i'];
 3     $s2option=array();
 4     //此处可查询数据库组织数据
 5     switch ($i) {
 6         case 1:
 7             $s2option=array(
 8                 array('key'=>'1','value'=>'二级子目录1'),
 9                 array('key'=>'2','value'=>'二级子目录2'),
10             );
11             break;
12         case 2:
13             $s2option=array(
14                 array('key'=>'3','value'=>'二级子目录3'),
15                 array('key'=>'4','value'=>'二级子目录4'),
16             );
17             break;
18         default:
19             # code...
20             break;
21     }
22     echo json_encode($s2option);
23 }
源码地址 链接：http://pan.baidu.com/s/1qXJV5SS 密码：cy8c

 



posted @ 2016-07-20 12:00  凉水冰冰  阅读(1553)  评论(0)  编辑  收藏  举报