页面HTML部分:
后台WebService部分:
<table>
<tr>
<td height="30" align="right">
省(市):
</td>
<td>
<select id="selProvince">
</select>
<asp:HiddenField ID="hfProvinceID" runat="server" Value="-1" />
</td>
</tr>
<tr>
<td height="30" align="right">
市(区):
</td>
<td>
<select id="selCity">
<option value="-1">请选择</option>
</select><asp:HiddenField ID="hfCityID" runat="server" Value="-1" />
</td>
</tr>
</table>
页面JS部分:
//加载省
$.ajax({
type: "post",
url: "ProbationService.asmx/GetProvinceList",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
eval("var s = " + data.d + ";");
$(s).each(function() {
appendOptions("selProvince", $(this).get(0).ID, $(this).get(0).Name);
});
$("#selProvince").change(function() {
getCitys($(this).val());
$("#hfProvinceID").val($(this).val());
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('网络异常,请稍候重试!');
}
});
//为指定的select添加option元素
function appendOptions(appTo, val, text) {
var s = document.createElement("option");
s.value = val;
s.text = text;
$("#" + appTo).append($(s));
}
//根据省ID加载城市列表
function getCitys(provinceID) {
$.ajax({
type: "post",
url: "ProbationService.asmx/GetCityList",
contentType: "application/json; charset=utf-8",
data: '{ "provinceID":"' + provinceID + '"}',
dataType: "json",
success: function(data) {
eval("var s = " + data.d + ";");
$("#selCity").children().remove();
$("#selCity").append("<option value='-1'>请选择</option>");
$(s).each(function() {
appendOptions("selCity", $(this).get(0).ID, $(this).get(0).Name);
});
$("#hfCityID").val("-1");
$("#selCity").change(function() {
$("#hfCityID").val($(this).val());
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('网络异常,请稍候重试!');
}
});
}
后台WebService部分:
namespace WebUI.Views.Probation
{
/// <summary>
/// ProbationService 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class ProbationService : System.Web.Services.WebService
{
[WebMethod]
public string GetProvinceList()
{
SqlDataReader sdr = SqlHelper.ExecuteReader(SqlHelper.ConnectionString3LocalTransaction, CommandType.Text, "SELECT [Name], [ID] FROM BaseDB.dbo.[tb_provinces]", null);
List<ProvinceCity> list = new List<ProvinceCity>();
while (sdr.Read())
{
list.Add(new ProvinceCity() { ID = sdr["ID"].ToString(), Name = sdr["Name"].ToString() });
}
return new JavaScriptSerializer().Serialize(list);
}
[WebMethod]
public string GetCityList(int provinceID)
{
SqlDataReader sdr = SqlHelper.ExecuteReader(SqlHelper.ConnectionString3LocalTransaction, CommandType.Text, "select Name,ID from BaseDB.dbo.tb_cities where provincesID =" + provinceID, null);
List<ProvinceCity> list = new List<ProvinceCity>();
while (sdr.Read())
{
list.Add(new ProvinceCity() { ID = sdr["ID"].ToString(), Name = sdr["Name"].ToString() });
}
return new JavaScriptSerializer().Serialize(list);
}
}
public class ProvinceCity
{
public string Name { get; set; }
public string ID { get; set; }
}
}