ajax省市区动态


跳转页面的按钮,跳转前加载
function openAddressForAdd(){
    var provinces=$("#provinces");
    $.ajax({
        url : 'city!seachProvince.do',
        type : "POST",
        dataType : "json",
        success : function(data) {
            var datas = data.data;
            provinces.empty();
            provinces.append("<option value=''>请选择省...</option>");
            for(var i=0;i<datas.length;i++){
                provinces.append("<option value='"+datas[i].id+"'>"+datas[i].name+"</option>");   
            }
        }
    });
    var expressId=$("#expressId");
    $.ajax({
        url : 'address!expressList.do',
        type : "POST",
        dataType : "json",
        success : function(data) {
            var datas = data.data;
            expressId.empty();
            expressId.append("<option value=''>请选择快递公司...</option>");
            for(var i=0;i<datas.length;i++){
                expressId.append("<option value='"+datas[i].id+"'>"+datas[i].name+"</option>");   
            }
        }
    });
    openAddressWindow();
}



页面====================
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<div class="docinPop login-skills" id="newDeliveryAddresss"
    style="display: none; width: 500px;">
    <div>
        <table class="docinPopTable">
            <tbody>
                <tr>
                    <td class="pop_topleft"></td>
                    <td class="pop_border"></td>
                    <td class="pop_topright"></td>
                </tr>
                <tr>
                    <td class="pop_border"></td>
                    <td class="pop_content">
                        <iframe
                            style="height: 100%; _height: 100px; width: 100%; position: absolute; top: 0; left: 0; z-index: -1;"
                            frameborder="0" scrolling="no"></iframe>
                        <div class="dialog_content ">
                            <h3 class="dialog_title">
                                新增/修改收货地址
                                <a href="javascript:closeShowMessage();" title="关闭"
                                    class="dialog_closed"><img src="myegtpage/common/img/popClose.gif" alt="关闭"> </a>
                            </h3>
                            <div class="dialog_body">
                                <form id="addressform" >
                                    <table width="100%" height="80">
                                        <tr>
                                            <td align="center" valign="middle">
                                                <table>
                                                    <tr>
                                                        <td class="td_css" style="width: 100px;">
                                                            <font color="red">*</font><span class="font_span">分店名称:</span>
                                                        </td>
                                                        <td>
                                                            <input type="hidden" id="id" name="address.id">
                                                            <input type="hidden" id="expressName" name="address.expressName">
                                                            <input type="text" id="storeName" name="address.storeName"
                                                                class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="td_css" style="width: 100px;">
                                                            <font color="red">*</font><span class="font_span">快递公司:</span>
                                                        </td>
                                                        <td>
                                                            <select name="address.expressId" id="expressId" class="txt newtxt" onchange="doChangExpress(this)" style="width: 162px;">
                                                                <option value="">
                                                                    请选择快递公司...
                                                                </option>
                                                            </select>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="td_css" style="width: 100px;">
                                                            <font color="red">*</font><span class="font_span">收货人:</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" id="deliveryer" name="address.deliveryer"
                                                                class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <font color="red">*</font><span class="font_span">所在地区:</span>
                                                        </td>
                                                        <td>
                                                            <select name="address.provinceId" title="省" id="provinces"
                                                                onchange="doSearchCitys(this)" class="txt newtxt"
                                                                style="width: 110px;">
                                                                <option value="">
                                                                    请选择省...
                                                                </option>
                                                            </select>
                                                            <select name="address.cityId" title="市" id="citys"
                                                                onchange="doSearchDistricts(this)" class="txt newtxt"
                                                                style="width: 110px;">
                                                                <option value="">
                                                                    请选择市...
                                                                </option>
                                                            </select>
                                                            <select name="address.districtID" title="区" id="districts"
                                                                onchange="doChangStreethead(this)" class="txt newtxt"
                                                                style="width: 110px;">
                                                                <option value="">
                                                                    请选择区/县...
                                                                </option>
                                                            </select>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <font color="red">*</font><span class="font_span" id="street_span">街道地址:</span>
                                                        </td>
                                                        <td>
                                                            <span id="streethead"></span>
                                                            <input type="text" id="street" name="address.addres"
                                                                class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <font color="red">*</font><span class="font_span">手机号码:</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" id="mobile" name="address.moblie" maxlength="11"
                                                                class="txt newtxt">
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <font color="red">*</font><span class="font_span">电话号码:</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" id="telNumber"
                                                                name="address.telNumber" class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <font color="red">*</font><span class="font_span">邮政编码:</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" id="postCode"
                                                                name="address.postCode" class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr class="crmId_show">
                                                        <td>
                                                            <font color="red"  class="crm_div">*</font><span class="font_span" id="crmId_span" >CRM门店编码</span><span>:</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" id="crmId" onblur="changeCrmName();"
                                                                name="address.crmId" class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr class="crmId_show">
                                                        <td>
                                                            <font color="red"  class="crm_div">*</font><span class="font_span" id="crmName_span" >CRM门店名称</span><span>:</span>
                                                        </td>
                                                        <td>
                                                            <input type="text" id="crmName" readonly="readonly"
                                                                name="address.crmName" class="txt newtxt">
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="2">
                                                            &nbsp;&nbsp;
                                                            <font id="errorMessage" color="red">${warm}</font>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="item"
                                        style="padding-top: 10px; text-align: center;">
                                        <button type="submit" class="btn" onclick="submitFromBtn()">添加地址</button>
                                        &nbsp;&nbsp;
                                        <button type="button" class="btn" onclick="resetFrom()">
                                            重置
                                        </button>
                                        &nbsp;&nbsp;
                                    </div>
                                </form>
                            </div>
                        </div>
                    </td>
                    <td class="pop_border">
                    </td>
                </tr>
                <tr>
                    <td class="pop_bottomleft"></td>
                    <td class="pop_border"></td>
                    <td class="pop_bottomright"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
    <br style="clear:both;" />



==============JS=================

//根据省份得到对应的城市
function doSearchCitys(obj){
    var provinces=$(obj);
    if(provinces.val() != ""){
        var phtml = provinces.find("option:selected").html();//省份被选中的文本
        var citys=$("#citys");
        $.ajax({
            url : 'city!seachCitys.do',
            data : ({
                "city.pid" : provinces.val()
               }),
            type : "POST",
            dataType : "json",
            success : function(data) {
                 var datas = data.data;
                 citys.empty();
                 citys.append("<option value=''>请选择市...</option>");
                 for(var i=0;i<datas.length;i++){
                    citys.append("<option value='"+datas[i].id+"'>"+datas[i].name+"</option>");   
                 }
            }
        });
        $("#streethead").html(phtml);
        cleanDistricts();
    }else{
        $("#streethead").html("");
        cleanCitys();
        cleanDistricts();
    }
}



function cleanDistricts(){
    var districts=$("#districts");
    districts.empty();
    districts.append("<option value=''>请选择区/县...</option>");
}

posted @ 2014-08-22 16:15  一只虾  阅读(124)  评论(0编辑  收藏  举报