【js與jquery】三級聯動菜單的製做

1.效果如圖所示：

2.html代碼：

[php] view plaincopy

    <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代碼：

[php] view plaincopy

$(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);
}