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">
<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>
<button type="button" class="btn" onclick="resetFrom()">
重置
</button>
</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>");
}