前台代码:

<asp:DropDownList runat="server" ID="ddlProvince">
</asp:DropDownList>
<asp:DropDownList runat="server" ID="ddlCity">
</asp:DropDownList>

后台绑定省份

protected void Page_Load(object sender, EventArgs e)
{
BindDDL();
ddlProvince.Attributes.Add("onchange", "getCitys(this)");
}
public void BindDDL()
{
//绑定省份、直辖市和特别行政区
ddlProvince.Items.Clear();
DataSet dsProvince = Province.GetAllCES();
ddlProvince.DataSource = dsProvince;
ddlProvince.DataTextField = "ProvinceName";
ddlProvince.DataValueField = "ProvinceID";
ddlProvince.DataBind();
ddlProvince.Items.Add(new ListItem("其他", "0"));
}

js事件处理getCitys(),为了提高性能,下面不该创建一个个的option对象然后一个个的添加到ddlcity里面,应该放到一个字符串里面然后一起放到optionddlcity里面,这里就不改了。

function getCitys(ddlProvince) {
$.ajax({
url: "SettingsHandler.ashx",
data: { type: "getCitys", ProvinceID: $(ddlProvince).find("option:selected").val() },
type: "get",
cache: false,
dataType: "json",
error: function() {
alert("occur error");
},
success: function(data) {
$('#ddlCity').empty();
var option0 = $("<option></option>");
option0.text("不限");
option0.val("0");
$('#ddlCity').append(option0);
if ($(ddlProvince).find("option:selected").val() != "0") {
var objCitys = eval(data);
$.each(objCitys.citys, function(i, city) {
var option = $("<option></option>");
option.text(city.CityName);
option.val(city.CityID);
$('#ddlCity').append(option);
});
}
}
});
}

SettingHandler.ashx文件

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string strjson = "{\"JDataList\":[]}";
string strType = context.Request.QueryString["type"].ToString();
if (strType == "getCitys")//根据省份ID获取对应的城市
{
string strProvinceID = context.Request.Form["ProvinceID"].ToString();
DataSet dsCitys = Province.GetCitysByProvinceID(ValidateHelper.GetInt(strProvinceID));
if (DataHelper.DataIsNotNull(dsCitys))
{
strjson = JsonHelper.DataTableToJSON(dsCitys.Tables[0], "citys");
}
}
    return strjson;
}

JsonHelper.DataTableToJSON(DataTable dt,string dtName)方法:

public static string DataTableToJSON(DataTable dt, string dtName)
{
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb); using (JsonWriter jw = new JsonTextWriter(sw))
{
JsonSerializer ser = new JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName(dtName);
jw.WriteStartArray();
foreach (DataRow dr in dt.Rows)
{
jw.WriteStartObject(); foreach (DataColumn dc in dt.Columns)
{
jw.WritePropertyName(dc.ColumnName);
ser.Serialize(jw, dr[dc].ToString());
} jw.WriteEndObject();
}
jw.WriteEndArray();
jw.WriteEndObject(); sw.Close();
jw.Close(); } return sb.ToString();
}

以上使用了JSON、JQUERY来实现省市的无刷新联动。

jquery 绑定省份和城市的更多相关文章

  1. 基于Jquery实现省份、城市、区县三级联动

    前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西. 据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码: <!DOC ...

  2. 基于MVC4+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动

    为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此对基于MVC的Web界面继续进行一些研究和优化,力求在功能和界面上保持和Winform一致,本文 ...

  3. (转)基于MVC4+EasyUI的Web开发框架经验总结(7)--实现省份、城市、行政区三者联动

    http://www.cnblogs.com/wuhuacong/p/3841338.html 为了提高客户体验和进行一些技术探索,现在正准备把我自己的客户关系管理系统CRM在做一个Web的版本,因此 ...

  4. 使用JavaScript数组实现省份和城市的级联菜单

    查看本章节 查看作业目录 需求说明: 使用数组实现省份和城市的级联菜单.具体要求如下 在页面中添加城市时,根据选择的省份,动态地添加该省份的城市 页面加载完毕后,第一个列表框填充"两湖两广& ...

  5. 启动和JQuery绑定--AngularJS学习笔记(二)

    上一篇简单的分析了AngularJS的项目结构,后面就开始分析具体的源代码了. 从angularFiles.js中的定义可以看出有几个文件直接位于src根目录,并不是隶属于某个模块.这几 个分别是mi ...

  6. 一张表有三个字段:id(城市id) Cityname(城市名) Privence(所属省份)如果要统计每个省份有多少城市请用SQL实现。

    一张表有三个字段:id(城市id) Cityname(城市名) Privence(所属省份)如果要统计每个省份有多少城市请用SQL实现.

  7. 查看jquery绑定的事件函数

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...

  8. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

  9. 每天一个JavaScript实例-动态省份选择城市

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. REVOKE DBA权限要小心

      REVOKE DBA权限要小心 转载:http://blog.csdn.net/lwei_998/article/details/6133557 发现某些用户有DBA权限的时候,为了安全,一般我们 ...

  2. 搜集的一些RTMP项目,有Server端也有Client端

    查询一些RTMP的协议封装时找到了一些RTMP开源项目,在这里列举一下,以后有时间或是有兴趣可以参考一下: just very few of them. Red5 only contains a se ...

  3. 漂亮灵活设置的jquery通知提示插件toastr

    toastr是一款非常棒的基于jquery库的非阻塞通知提示插件,toastr可设定四种通知模式:成功,出错,警告,提示,而提示窗口的位置,动画效果都可以通过能数来设置,在官方站可以通过勾选参数来生成 ...

  4. mount

    产品,平台,RS6000, pseries 软件版本, aix 当NFS在NFS客户端加载时,系统会问是使用 soft-mount 还是hard-mount, 它们之间有什么区别? 它们的区别在于当发 ...

  5. javascript将json转字符串

    例如: var last=obj.toJSONString(); //将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); //将JSON对象转化为JSO ...

  6. Vijos 1114 FBI树

    描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为B串,全"1"串称为I串,既含"0&quo ...

  7. [转] ArcEngine 产生专题图

    小生原文 ArcEngine 产生专题图 ArcEngine提供多个着色对象用于产生专题图,可以使用标准着色方案,也可以自定义着色方案,ArcEngine提供8中标准着色方案. 一.SimpleRen ...

  8. Android Scrollview 内部组件android:layout_height="fill_parent"无效的解决办法

    Found the solution myself in the end. The problem was not with the LinearLayout,  but with the Scrol ...

  9. 通过反汇编C语言小程序学习Liunx汇编语言

    大家好!    我是来自山东师范大学的吴乐.    今天在<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ...

  10. Oracle数据库管理之创建和删除数据库

    转自:http://supportopensource.iteye.com/blog/678898 一.数据库管理概述 在完成Oracle软件安装后,DBA就应该对组织和管理数据库负责任,其主要任务是 ...