查看文章
 
PHP+JQUERY+JSON 级联菜单~
2011/04/19 11:28

jquery部分:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        //加载一级信息
        jQuery.post(
        "json/json-department.php",
        function(data_p){
            for(var i=0;i<data_p.department.length;i++){
                jQuery("#department").append('<option value='+data_p.department[i].code+'>'+data_p.department[i].name+'</option>');
            }
        },
        "json"
        );
        //当省改变的时候二级信息
        jQuery("#department").change(function(){
            jQuery("#doctor").html("");
            jQuery.post(
            "json/json-doctor.php",
            function(data_c){
                for(var j=0;j<data_c.doctor.length;j++){
                    var provinceNum = jQuery("#department").val();
                    if (provinceNum.substring(0, 2) == data_c.doctor[j].code.substring(0, 2)){ //可以用于城市邮编截取判断
                        jQuery("#doctor").append('<option value='+data_c.doctor[j].code+'>'+data_c.doctor[j].name+'</option>');
                    }
                    
                }
            },
            "json"
            );
        });
    }
    );
</script>

 

HTML部分:

<select id="department" ><option>请选择科室</option></select>

<select id="doctor" name="doctor" ><option>请选择医生</option></select>

 

JSON部分: 

文件: json/json-doctor.php

{"doctor":[
    {"name":"张三", "code":"3"},
    {"name":"李四", "code":"3"},
    {"name":"王武", "code":"3"},
    {"name":"周六", "code":"3"},
    {"name":"赵八", "code":"3"},
    {"name":"钱九", "code":"2"},
    {"name":"孙十", "code":"2"},
    {"name":"曹操", "code":"2"},
    {"name":"夏侯", "code":"1"},
    {"name":"杨辉", "code":"1"},
    {"name":"关羽", "code":"4"},
    {"name":"董卓", "code":"4"},
    {"name":"韩寒", "code":"4"}
]}

文件: json/json-department.php

{
"department":[
    {"name":"产科", "code":"1"},
    {"name":"妇科", "code":"2"},
    {"name":"儿科", "code":"3"},
    {"name":"口腔科", "code":"4"}
]
}


类别:php实例|浏览(407)|评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
     

   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu