[ PHP+jQuery ] ajax 多级联动菜单的应用：电商网站的用户地址选择功能 ( 一 ) - 传统下拉菜单

/**
　 jQuery version: 1.8.3
   Author: 小dee
   Date: 2014.11.5
*/

<form id="select-form" action="addr.php" method="post"> 
    
        <!-- 第一级 省份 -->
        <select id="province">    
            <option>选择省份</option>
        </select>

        <!-- 第一级 城市 初始状态不可用 -->
        <select id="city" disabled>    
            <option>选择城市</option>
        </select>

        <!-- 第一级 区县 初始状态不可用 -->
        <select id="area" disabled>    
            <option>选择区县</option>
        </select>
        
        <!-- 隐藏域 -->
        <input type="hidden" id="pid" name="pid">
        <input type="hidden" id="p" name="p">
        <input type="hidden" id="cid" name="cid">
        <input type="hidden" id="c" name="c">
        <input type="hidden" id="aid" name="aid">
        <input type="hidden" id="a" name="a">

        <input id="sub" type="submit" value="提交">

    </form><br>
    
    <!-- 显示选择的结果 -->
    省份：<{$pid}> - <{$p}><br>
    城市：<{$cid}> - <{$c}><br>
    区县：<{$aid}> - <{$a}><br>
    <{if $sid && $s }>
    街道：<{$sid}> - <{$s}>
    <{/if}>

$(function(){
    
        //ajax方式加载第一级菜单 - 省份
        $.post("sel.php",{
            city:true
        },function(data,textStatus){
        
            //接收json数据
            var dataObj = eval("("+data+")"); //转换为json对象 

            $.each(dataObj,function(idx,item){ 
                                     
                $option_new = $("<option value=\""+item.provinceID+"\">"+item.province+"</option>");
                $option_new.insertAfter($("#province").children(":first"));
            })

        });

//....

//初始加载所有的省份信息
if($_POST['city']){

    $sql = "select provinceID,province from province order by id desc";

    if( $conne->getRowsNum($sql) > 0 ){
    
        $rows = $conne->getRowsArray($sql);
        
        //把二维数组转换成json格式
        echo json_encode($rows);
    }
}

 1 //选择第一级菜单 - 省份
 2 $("#province").bind("change",function(){
 3 
 4     //第三级菜单 - 地区不可用
 5     $(this).nextAll().children().removeAttr("selected");
 6     $(this).siblings("select").attr("disabled",true);
 7 
 8 
 9     //同时清除隐藏域
10     $("#cid").val("");
11     $("#c").val("");
12     $("#aid").val("");
13     $("#a").val("");
14 
15     if($("#street").length > 0){
16     
17         $("#street").remove();
18         $("#sid").val("");
19         $("#s").val("");
20     }
21     
22     //遍历option
23     $(this).children().each(function(){
24 
25         if($(this).val() == $(this).parent().val()){
26 
27             //选中该条
28             $(this).attr("selected",true);
29             
30             //把该条的id放入隐藏域
31             $("#pid").val($(this).val());
32             $("#p").val($(this).text());
33         }else{
34         
35             //没有选中的去掉之前的selected
36             $(this).removeAttr("selected");
37         }
38 
39     });
40 
41     //选中省份之后，使用ajax获取第二季菜单 - 城市
42     $.post("sel.php",{
43         pid : $("#pid").val()
44     },function(data,textStatus){
45     
46         //如果有返回值
47         if(data){
48 
49             //城市菜单可用
50             $("#city").attr("disabled",false);
51 
52             //删除之前选择省份加载的城市
53             $("#city").children(":not(:first)").remove();
54             
55             //接收json数据
56             var dataObj = eval("("+data+")"); //转换为json对象 
57 
58             $.each(dataObj,function(idx,item){ 
59                                      
60                 $option_new = $("<option value=\""+item.cityID+"\">"+item.city+"</option>");
61                 $option_new.insertAfter($("#city").children(":first"));
62             })
63         }else{
64         
65             //没有返回值，说明第一级菜单没有选中省份
66             //城市菜单恢复默认而且不可用
67             $("#city").children().removeAttr("selected");
68             $("#city").attr("disabled",true);
69         }
70     });
71 
72 });

//当接收到post的pid，加载城市信息
if( isset($_POST['pid']) && $_POST['pid']!="选择省份" ){

    $sql = "select cityID,city from city where father = ".$_POST['pid']." order by id desc";

    if( $conne->getRowsNum($sql) > 0 ){
    
        $rows = $conne->getRowsArray($sql);
        
        //把二维数组转换成json格式
        echo json_encode($rows);
    }
}

  1 //选择第三级菜单 - 地区
  2 $("#area").bind("change",function(){
  3 
  4     if($("#street").length > 0){
  5     
  6         $("#street").remove();
  7         $("#sid").val("");
  8         $("#s").val("");
  9     }
 10     
 11     //遍历option
 12     $(this).children().each(function(){
 13 
 14         if($(this).val() == $(this).parent().val()){
 15         
 16             //排除第一条(即"请选择")
 17             if( $(this).parent().val() !== $(this).parent().children(":first").val() ){
 18 
 19                 //选中该条
 20                 $(this).attr("selected",true);
 21                 
 22                 //把该条的id和名称放入隐藏域
 23                 $("#aid").val($(this).val());
 24                 $("#a").val($(this).text());
 25             }else{
 26             
 27                 //当是第一条时，把隐藏域的值清空，无法提交
 28                 $("#aid").val("");
 29                 $("#a").val("");
 30             }
 31         }else{
 32         
 33             //没有选中的去掉之前的selected
 34             $(this).removeAttr("selected");
 35         }
 36 
 37     });    
 38 
 39     //检测是否还有下一级
 40     $.post("sel.php",{aid:$("#aid").val()},function(data,textStatus){
 41     
 42         //如果有返回值
 43         if(data){
 44 
 45             //动态添加下一级菜单
 46             $street = $("<select id=\"street\"><option>选择街道</option></select>");
 47             $street.insertAfter($("#area"));
 48 
 49             //删除之前选择省份加载的街道
 50             $("#street").children(":not(:first)").remove();
 51             
 52             //接收json数据
 53             var dataObj = eval("("+data+")"); //转换为json对象 
 54 
 55             $.each(dataObj,function(idx,item){ 
 56                                      
 57                 $option_new = $("<option value=\""+item.streetID+"\">"+item.street+"</option>");
 58                 $option_new.insertAfter($("#street").children(":first"));
 59 
 60                 //如果有第四级
 61                 if($("#street").length > 0){
 62 
 63                     $("#street").live("change",function(){
 64                     
 65                         //清空隐藏域
 66                         $("#sid").remove();
 67                         $("#s").remove();
 68                         
 69                         //遍历option
 70                         $(this).children().each(function(){
 71 
 72                             if($(this).val() == $(this).parent().val()){
 73 
 74                                 //选中该条
 75                                 $(this).attr("selected",true);
 76                                 
 77                                 //添加隐藏域并把把该条的id放入隐藏域
 78                                 $sid = $("<input type=\"hidden\" id=\"sid\" name=\"sid\">");
 79                                 $s = $("<input type=\"hidden\" id=\"s\" name=\"s\">");
 80 
 81                                 $sid.insertAfter($("#a"));
 82                                 $s.insertAfter($("#sid"));
 83 
 84                                     //排除第一条(即"请选择")
 85                                     if( $(this).parent().val() !== $(this).parent().children(":first").val() ){
 86 
 87                                         //选中该条
 88                                         $(this).attr("selected",true);
 89                                         
 90                                         //把该条的id和名称放入隐藏域
 91                                         $("#sid").val($(this).val());
 92                                         $("#s").val($(this).text());
 93                                     }else{
 94                                     
 95                                         //当是第一条时，把隐藏域的值清空，无法提交
 96                                         $("#sid").val("");
 97                                         $("#s").val("");
 98                                     }
 99                             }else{
100                             
101                                 //没有选中的去掉之前的selected
102                                 $(this).removeAttr("selected");
103                             }
104 
105                         });    
106                     });
107                 }
108             })
109         }else{
110         
111             //没有返回值，说明上一级菜单没有选中，删除第四级菜单
112             $("#street").children().removeAttr("selected");
113             $("#street").remove();
114         }
115     });
116 });