用jquery+Asp.Net实现省市二级联动
页面html:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ddlAjax.aspx.cs" Inherits="ThreeAjaxDrop_ddlAjax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DropDownList三级联动</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial @宋体;}
</style>
<script type="text/javascript" src="../js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//加载完成后绑定省份数据
$.getJSON("Default.aspx", function(data) { //data的数据格式[{"text":"北京","value":"0001"},{"text":"江西","value":"0031"}]
//alert(data[0].text+"|"+data[0].value);
$.each(data, function(index, value) {
//alert(value.text + "|" + value.value);
$("#selProvince").append("<option value='" + value.value + "'>" + value.text + "</option>");
});
});
//省份的值改变,则要绑定出城市下拉框
$("#selProvince").change(function(){
document.getElementById("selArea").options.length=1; //先清掉县下拉框的的数据
document.getElementById("selCity").options.length=1; //先清掉城市下拉框的的数据
$.getJSON("HandlerDropDownAjax.ashx",{"type":"city","fid":$(this).val()},function(data){
$.each(data, function(index, value) {
$("#selCity").append("<option value='" + value.value + "'>" + value.text + "</option>");
});
});
});
//城市下拉框的值改变
$("#selCity").change(function(){
document.getElementById("selArea").options.length=1; //先清掉县下拉框的的数据
$.getJSON("HandlerDropDownAjax.ashx",{"type":"area","fid":$(this).val()},function(data){
$.each(data, function(index, value) {
$("#selArea").append("<option value='" + value.value + "'>" + value.text + "</option>");
});
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
三级联动:<select id="selProvince">
<option value="选择省份">==选择省份==</option>
</select> <select id="selCity"><option>==选择城市==</option></select>& amp;nbsp; <select id="selArea"><option>==选择县==</option></select>
</div>
</form>
</body>
</html>
asp.net:(1)Default.aspx.cs
public partial class ThreeAjaxDrop_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string sql = "select * from province";
string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\""; //构造格式字符串 {"text":"北京","value":"00001"}
StringBuilder sb = new StringBuilder();
OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);
while (reader.Read())
{
string str1 = string.Format(strTemp, reader["province"].ToString(), reader["provinceID"].ToString());
sb.Append("{"+str1+"},");
}
reader.Close();
string json = sb.ToString();
Response.Write("["+json.Substring(0,json.Length-1)+"]");
}
}
(2)HandlerDropDownAjax.ashx
public class HandlerDropDownAjax : IHttpHandler { public void ProcessRequest (HttpContext context) {
if (context.Request.QueryString["type"] != null && context.Request.QueryString["fid"] != null)
{
string type = context.Request.QueryString["type"].ToString(); //主要用于识别是查询city还是area表
string fid = context.Request.QueryString["fid"].ToString(); //城市或区域的父ID
string sql = "select * from " + type + " where father='" + fid + "'";
//构造数据的类型[{"text":"南昌","value":"0001"},{"text":"上饶","value":"0002"}]
//string strTemp = "{\"text\":\"{0}\",\"value\":\"{1}\"}";//这里犯了个错误:直接这样构造会出错,因为大括号里又有格式大括号,解析会出错
string strTemp = "\"text\":\"{0}\",\"value\":\"{1}\""; //构造格式字符串 {"text":"北京","value":"00001"}
StringBuilder sb = new StringBuilder();
OleDbDataReader reader = OleDBHelper.ExecuteReader(sql);
while (reader.Read())
{
string str1 = string.Format(strTemp, reader[2].ToString(), reader[1].ToString());
sb.Append("{" + str1 + "},"); //两边的大括号格式化后加上
}
reader.Close();
string json = sb.ToString();
context.Response.Write("[" + json.Substring(0, json.Length - 1) + "]"); //Substring的作用是去掉最后一个'逗号'
}
}
public bool IsReusable {
get {
return false;
}
}
}
用jquery+Asp.Net实现省市二级联动的更多相关文章
- JQuery EasyUI Combobox 实现省市二级联动菜单
//编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...
- JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)
JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 省市二级联动(原生JS)
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- JavaScript 实现省市二级联动
JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
随机推荐
- 远程拷贝、查看端口、vim常见快捷键、查找替换命令、grep命令、查看存储空间的命令、chkconfig命令、系统自动启动级别、主机名配置、IP地址配置、域名映射、防火墙设置
2.1.远程拷贝 (将/export/servers/hadoop上的文件拷贝到bigdate@192.168.1.1:/export/servers/ ) scp –r /export/server ...
- 在线看Android系统源码,那些相见恨晚的几种方案
请尊重分享成果,转载请注明出处,本文来自逆流的鱼yuiop,原文链接:http://blog.csdn.net/hejjunlin/article/details/53454514 前言:最近在研究M ...
- PLSQL实现分页查询
--集合实现游标查询 CREATE OR REPLACE PACKAGE emppkg IS TYPE t_record IS RECORD( rn INT, empno emp.empno%TYPE ...
- introduction of velocity
一.velocity 简介 基于java 的模板引擎,apache 旗下的开源软件项目. 目的在于隔离 表示层和业务逻辑层,当然现在做的不仅仅是这些. 二.应用场景 web 应用程序:创建html页面 ...
- Android View框架总结(六)View布局流程之Draw过程
请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52236145 View的Draw时序图 ViewRootImpl.p ...
- 【java虚拟机系列】JVM类加载器与ClassNotFoundException和NoClassDefFoundError
在我们日常的项目开发中,会经常碰到ClassNotFoundException和NoClassDefFoundError这两种异常,对于经验足够的工程师而言,可能很轻松的就可以解决,但是却不一定明白为 ...
- Servlet之Response对象
下面的方法可用于在 Servlet 程序中设置 HTTP 响应报头.这些方法通过HttpServletResponse 对象可用. 1 String encodeRedirectURL(Stri ...
- ajax post请求request.getParameter("")取值为null
今天在写提交一个json数据到后台,然后后台返回一个json数据类型.但是发现后台通过request.getParamter("")取到的值为null. 于是写一个简单的ajax ...
- 流量控制闸门——LimitLatch套接字连接数限制器
Tomcat作为web服务器,对于每个客户端的请求将给予处理响应,但对于一台机器而言,访问请求的总流量有高峰期且服务器有物理极限,为了保证web服务器不被冲垮我们需要采取一些措施进行保护预防,需要稍微 ...
- golang函数可变参数传递性能问题
几天前纠结了一个蛋疼的问题,在go里面函数式支持可变参数的,譬如...T,go会创建一个slice,用来存放传入的可变参数,那么,如果创建一个slice,例如a,然后以a...这种方式传入,go会不会 ...