【js与jquery】三级联动菜单的制作

1.效果如图所示：

2.html代码：

        <li><span class="receiving">所在地区：</span>  
    <span id="addr_select">  
            <select id='province_select' name='province'></select>   
            <span id="city_select_poss" class="ssq"></span>  
            <span id="town_select_poss" class="ssq"></span>  
    </span>  
    <font color="#FF0000">*</font>  
        </li>  
         <li>  
     <span class="receiving">街道地址：</span><span id="pre-address"></span>  
     <input type="text" id="add_addr_input" name="address" value="" style="width: 180px;"/>  
     <font color="#FF0000"> *</font><em id="add_addr_input_info"></em>  
        </li>  
         <li>  
     <span class="receiving">邮政编码：</span>  
     <input type="text" value="" id="postcode_add" name="postcode" style="width: 180px;"/>  
     <font color="#FF0000"> </font>  
    t;/li>  

3.jquery代码：

</pre><pre name="code" class="javascript">    $(document).ready(function(){  
        province_list();//加载省份下拉菜单  
        $("#province_select").change(function(){//省份选项发生改变时  
            var province = $("#province_select").val();  
            $("#pre-address").html(province);  
            showcity(province);//省份发生变化时，城市下拉菜单也要随之变化  
            $("#postcode_add").attr('value', '');//在选择town项时，会自动获取邮政编码  
        })  
    })  
      
    //省份下拉菜单  
    function province_list(){  
        $.getJSON('/?c=addr&a=getprovince',  
                {},  
                function(data){  
                    $("#province_select").append("");  
                    $.each(data,function(i,k){  
                        if ( i==0 ) {  
                            $("#province_select").append("<option selected>请选择</option><option value='"+k.local_name+"' >"+k.local_name+"</option>");  
                            showcity(k.local_name);  
                        } else {  
                            $("#province_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");  
                        }  
                    })  
                });  
    }  
    //显示城市下拉菜单  
    function showcity(province){  
        $.getJSON('/?c=addr&a=getcity',  
                {province:province},  
                function(data){  
                    $("#city_select_poss").html("");  
                    $("#town_select_poss").html("");  
                    if (data) {  
                        $("#city_select_poss").html("<select id='city_select' name='city' onChange='city_select_function();'></select>");  
                    }  
                    $("#city_select").html("");  
                    $.each(data,function(i,k){  
                        if ( i == 0){  
                            $("#city_select").append("<option  selected>请选择</option><option value='"+k.local_name+"'>"+k.local_name+"</option>");  
                            var addr = province + k.local_name;  
                            //$("#pre-address").html(addr);  
                            showtown(k.local_name);  
                        } else {  
                            $("#city_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");  
                        }  
                    })  
                })  
    }  
      
    //显示城乡下拉菜单  
    function showtown(city){  
        $.getJSON('/?c=addr&a=gettown',  
                {city:city},  
                function(data){  
                    if (data) {  
                        $("#town_select_poss").html("<select id='town_select' name='town' onchange='town_select_function();'></select>");  
                    } else {  
                        $("#town_select_poss").html("");  
                    }  
                    $("#town_select").html("");  
                    $.each(data,function(i,k){  
                        if ( i == 0 ) {  
                            $("#town_select").append("<option selected>请选择</option><option value='"+k.local_name+"'>"+k.local_name+"</option>");  
                        } else {  
                            $("#town_select").append("<option value='"+k.local_name+"'>"+k.local_name+"</option>");  
                        }  
                    })  
                }  
                )  
    }  
    //获取邮政编码  
    function getPostCode(town, city, province,id){  
        $.get('/?c=addr&a=getpost',  
                {town:town,city:city,province:province},  
                function( data ){  
                    if ( data > 0 ) {  
                        if ( id == "" || id== undefined) {  
                            $("#postcode_add").attr('value', data);  
                        } else {  
                            $("#"+id+"postcode_add").attr('value', data);  
                        }  
                    } else {  
                        //$("#postcode_add").attr('value', '');  
                        if ( id == "" || id== undefined) {  
                            $("#postcode_add").attr('value', '');  
                        } else {  
                            $("#"+id+"postcode_add").attr('value', '');  
                        }  
                    }  
                }  
            )  
    }  
      
    //城市选项发生改变时，触发此函数  
    function city_select_function() {  
        var province = $("#province_select").find("option:selected").text();  
        var city = $("#city_select").find("option:selected").text();  
        var addr = province + city;  
        $("#pre-address").html(addr);  
        showtown(city);  
        var town = $("#town_select").find("option:selected").text();  
        getPostCode(town, city, province);  
    }  
      
    //城乡选项发生变化时，触发此函数  
    function town_select_function(){  
        var province = $("#province_select").find("option:selected").text();  
        var city = $("#city_select").find("option:selected").text();  
        var town = $("#town_select").find("option:selected").text();  
        var addr = province + city + town;  
        $("#pre-address").html(addr);  
        getPostCode(town, city, province);  
    }