Tips:点此可运行HTML源码

PHP+jQuery 简单二级级联菜单(原创自Zjmainstay)

数据库表 `jilian`
CREATE TABLE `jilian` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `parentid` int(11) NOT NULL,
  `name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `parentid_name_unique` (`parentid`,`name`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8
数据初始化文件 loaddata.php
<?php
$p = array();
$p[1] = "北京";
$p[2] = "上海";
$p[3] = "天津";
$p[4] = "重庆";
$p[5] = "河北";
$p[6] = "山西";
$p[7] = "内蒙古";
$p[8] = "辽宁";
$p[9] = "吉林";
$p[10] = "黑龙江";
$p[11] = "江苏";
$p[12] = "浙江";
$p[13] = "安徽";
$p[14] = "福建";
$p[15] = "江西";
$p[16] = "山东";
$p[17] = "河南";
$p[18] = "湖北";
$p[19] = "湖南";
$p[20] = "广东";
$p[21] = "广西";
$p[22] = "海南";
$p[23] = "四川";
$p[24] = "贵州";
$p[25] = "云南";
$p[26] = "西藏";
$p[27] = "陕西";
$p[28] = "甘肃";
$p[29] = "宁夏";
$p[30] = "青海";
$p[31] = "新疆";
$p[32] = "香港";
$p[33] = "澳门";
$p[34] = "台湾";

$c[1] =Array("东城","西城","崇文","宣武","朝阳","丰台","石景山","海淀","门头沟","房山","通州","顺义","昌平","大兴","平谷","怀柔","密云","延庆");
$c[2] =Array("黄浦","卢湾","徐汇","长宁","静安","普陀","闸北","虹口","杨浦","闵行","宝山","嘉定","浦东","金山","松江","青浦","南汇","奉贤","崇明");
$c[3] =Array("和平","东丽","河东","西青","河西","津南","南开","北辰","河北","武清","红挢","塘沽","汉沽","大港","宁河","静海","宝坻","蓟县");
$c[4] =Array("万州","涪陵","渝中","大渡口","江北","沙坪坝","九龙坡","南岸","北碚","万盛","双挢","渝北","巴南","黔江","长寿","綦江","潼南","铜梁","大足","荣昌","壁山","梁平","城口","丰都","垫江","武隆","忠县","开县","云阳","奉节","巫山","巫溪","石柱","秀山","酉阳","彭水","江津","合川","永川","南川");
$c[5] =Array("石家庄","邯郸","邢台","保定","张家口","承德","廊坊","唐山","秦皇岛","沧州","衡水");
$c[6] =Array("太原","大同","阳泉","长治","晋城","朔州","吕梁","忻州","晋中","临汾","运城");
$c[7] =Array("呼和浩特","包头","乌海","赤峰","呼伦贝尔盟","阿拉善盟","哲里木盟","兴安盟","乌兰察布盟","锡林郭勒盟","巴彦淖尔盟","伊克昭盟");
$c[8] =Array("沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛");
$c[9] =Array("长春","吉林","四平","辽源","通化","白山","松原","白城","延边");
$c[10] =Array("哈尔滨","齐齐哈尔","牡丹江","佳木斯","大庆","绥化","鹤岗","鸡西","黑河","双鸭山","伊春","七台河","大兴安岭");
$c[11] =Array("南京","镇江","苏州","南通","扬州","盐城","徐州","连云港","常州","无锡","宿迁","泰州","淮安");
$c[12] =Array("杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水");
$c[13] =Array("合肥","芜湖","蚌埠","马鞍山","淮北","铜陵","安庆","黄山","滁州","宿州","池州","淮南","巢湖","阜阳","六安","宣城","亳州");
$c[14] =Array("福州","厦门","莆田","三明","泉州","漳州","南平","龙岩","宁德");
$c[15] =Array("南昌市","景德镇","九江","鹰潭","萍乡","新馀","赣州","吉安","宜春","抚州","上饶");
$c[16] =Array("济南","青岛","淄博","枣庄","东营","烟台","潍坊","济宁","泰安","威海","日照","莱芜","临沂","德州","聊城","滨州","菏泽");
$c[17] =Array("郑州","开封","洛阳","平顶山","安阳","鹤壁","新乡","焦作","濮阳","许昌","漯河","三门峡","南阳","商丘","信阳","周口","驻马店","济源");
$c[18] =Array("武汉","宜昌","荆州","襄樊","黄石","荆门","黄冈","十堰","恩施","潜江","天门","仙桃","随州","咸宁","孝感","鄂州");
$c[19] =Array("长沙","常德","株洲","湘潭","衡阳","岳阳","邵阳","益阳","娄底","怀化","郴州","永州","湘西","张家界 ");
$c[20] =Array("广州","深圳","珠海","汕头","东莞","中山","佛山","韶关","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","河源","阳江","清远","潮州","揭阳","云浮");
$c[21] =Array("南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","南宁地区","柳州地区","贺州","百色","河池");
$c[22] =Array("海口","三亚");
$c[23] =Array("成都","绵阳","德阳","自贡","攀枝花","广元","内江","乐山","南充","宜宾","广安","达川","雅安","眉山","甘孜","凉山","泸州");
$c[24] =Array("贵阳","六盘水","遵义","安顺","铜仁","黔西南","毕节","黔东南","黔南");
$c[25] =Array("昆明","大理","曲靖","玉溪","昭通","楚雄","红河","文山","思茅","西双版纳","保山","德宏","丽江","怒江","迪庆","临沧");
$c[26] =Array("拉萨","日喀则","山南","林芝","昌都","阿里","那曲");
$c[27] =Array("西安","宝鸡","咸阳","铜川","渭南","延安","榆林","汉中","安康","商洛");
$c[28] =Array("兰州","嘉峪关","金昌","白银","天水","酒泉","张掖","武威","定西","陇南","平凉","庆阳","临夏","甘南");
$c[29] =Array("银川","石嘴山","吴忠","固原");
$c[30] =Array("西宁","海东","海南","海北","黄南","玉树","果洛","海西");
$c[31] =Array("乌鲁木齐","石河子","克拉玛依","伊犁","巴音郭勒","昌吉","克孜勒苏柯尔克孜","博尔塔拉","吐鲁番","哈密","喀什","和田","阿克苏 ");
$c[32] =Array("香港特别行政区 ");
$c[33] =Array("澳门特别行政区 ");
$c[34] =Array("台北","高雄","台中","台南","屏东","南投","云林","新竹","彰化","苗栗","嘉义","花莲","桃园","宜兰","基隆","台东","金门","马祖","澎湖");

if(!isset($conn)){
    $conn = mysql_connect("localhost","Zjmainstay","");
    mysql_select_db("test",$conn);

    mysql_query("SET NAMES utf8",$conn);
}

$query = "SELECT count(*) FROM `jilian`";
$result = mysql_query($query);
while($row = mysql_fetch_row($result)) {
    if($row[0] != 0) {
        echo 'Already have data in table';
        return false;
    }
}

$query = "INSERT INTO `jilian`(id,parentid,name) VALUES(1,0,'中国')";
mysql_query($query);
foreach($p as $pid => $province) {
    $query = "INSERT INTO `jilian`(id,parentid,name) VALUES(null,1,'$province')";
    mysql_query($query);
    $parentid = mysql_insert_id($conn);
    foreach($c[$pid] as $cid => $city) {
        $query = "INSERT INTO `jilian`(id,parentid,name) VALUES(null,$parentid,'$city')";
        mysql_query($query);
    }
}
echo 'Done!';
//End_php
级联html文件 tier.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Tier</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <script type="text/javascript" src="https://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#tier select").change(function(){
                var id = $(this).attr('id');

      if(id == 'city') return false;
                var parentid = $(this).val();
                if(parentid == '') {
                    if(id == 'country') {
                        $("#province").empty().hide();
                        $("#city").empty().hide();
                    }
                    if(id == 'province') $("#city").empty().hide();
                    return false;
                }
                $.ajax({  
                    type: "POST",  
                    url: '/test/tier_get.php',
                    data: {    
                        "parentid": parentid
                    },  
                    success: function (data, status){    
                        if("success"==status){
                            if(id == 'country') {
                                $("#province").empty().show().append(data);
                                $("#city").empty().hide();
                            }
                            if(id == 'province') $("#city").empty().show().append(data);
                        }else{    
                            $.messager.alert('系统信息',"访部服务器发生错误!",'warning');    
                        }   
                    },  
                    async: false
                });
            });
            $.initier = function(){
                $.ajax({  
                    type: "POST",  
                    url: '/test/tier_get.php',
                    data: {    
                        "parentid": 0
                    },  
                    success: function (data, status){    
                        if("success"==status){
                            $("#country").empty().show().append(data);
                        }else{    
                            $.messager.alert('系统信息',"访部服务器发生错误!",'warning');    
                        }   
                    },  
                    async: false
                });
            };
            $.initier();
        });
    </script>
</head>
<body>
<?php
echo "<div id='tier'>";
echo "<select id='country'></select>";
echo "<select id='province' style='display:none'></select>";
echo "<select id='city' style='display:none'></select>";
echo "</div>";
?>
</body>
</html>
级联ajax处理文件 tier_get.php
<?php
header("Content-type:text/html;charset=utf-8");
if(!isset($conn)){
    $conn = mysql_connect("localhost","Zjmainstay","");
    mysql_select_db("test",$conn);

    mysql_query("SET NAMES utf8",$conn);
}
$parentid = empty($_POST['parentid'])? 0 : $_POST['parentid'];
$query = "SELECT name,id FROM `tier` WHERE parentid='$parentid'";
$result = mysql_query($query,$conn);

$data = array();
$options = '<option value="">Please Select</option>';
while($res = mysql_fetch_assoc($result)){
    $options .= "<option value='".$res['id']."'>".$res['name']."</option>";
}
echo $options;

//End_php

 软件包下载:中国省市二级级联

 演示地址:演示地址

 

 

 

posted @ 2012-05-11 10:35  Zjmainstay  阅读(1414)  评论(0编辑  收藏  举报