页面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实现省市二级联动的更多相关文章

  1. JQuery EasyUI Combobox 实现省市二级联动菜单

    //编辑改动或新增页面联动能够这样写 jQuery(function(){ // 省级 $('#province').combobox({ valueField:'itemvalue', //值字段 ...

  2. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  3. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  4. 省市二级联动（原生JS）

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  5. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  6. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  7. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  8. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. jquery ajax实现省市二级联动

    今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...

随机推荐

  1. React Native自定义导航条

    Navigator和NavigatorIOS 在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换.在React Native中RN为我们提供了两个组件:Navigator ...

  2. 移动开发测试工具——Bugtags的集成

    移动开发测试工具--Bugtags 官网:https://bugtags.com/ 注册开发者账号 注册账号并激活邮箱,都会就不多做介绍了. 创建应用 创建完账号以后会提示添加应用,点击添加 添加应用 ...

  3. iOS应用程序工程文件以及启动流程

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51351188 本文出自:[openXu的博客] iOS程序启动流程 完整启动流程 UIApp ...

  4. Python读取JSON数据，并解决字符集不匹配问题

    今天来谈一谈Python解析JSON数据,并写入到本地文件的一个小例子. – 思路如下 从一个返回JSON天气数据的网站获取到目标JSON数据串 使用Python解析出需要的部分 写入到本地文件,供其 ...

  5. 如何通过网络连接进行ADB调试

    点击打开链接 大家在使用adb调试Android系统时可能会遇到麻烦,比如usb端口只有一个,如果用作adb调试,就不能通过usb连接其它器件,或者usb端口不能使用时也没法进行adb调试. Andr ...

  6. 让 Google Test 出错时断点

    Google Test 缺省是出错退出. 如果最后的出错行在系统库中,那就没什么帮助. 如果是调试运行,直接退出根本就不知道哪里出错了. 后来添加了一个运行参数: --gtest_break_on_f ...

  7. （一一八）利用block实现链式编程

    有些时候需要不断地调用方法,如果使用传统方案,需要拿到对象多次调用,例如有一个Ball对象,实现了up.down.left.right四个方法,分别控制球的运动方向,如果要实现球向右再向下,需要这么写 ...

  8. [django]项目打包构建

    django项目的结构大体上都是类似,打包主要的功能就是把一些不需要部署的文件剔除,把需要部署的文件直接压缩打包. 这里还想集成一个配置文件模板生成配置文件的过程,或者写一个配置文件生成的工具,不用每 ...

  9. （八十七）AutoLayout的简介与实例

    AutoLayout是继AutoResizing之后的一种自动布局方法,解决了AutoResizing无法处理控件间相互关系的问题. AutoLayout在storyboard中通过底部工具条设置,底 ...

  10. 【Android 应用开发】 Android 相关代码规范 更新中 ...

    . 简介 : Android 常用的代码结构, 包括包的规范, 测试用例规范, 数据库模块常用编写规范; 参考 : 之前写的一篇博客 [Android 应用开发] Application 使用分析 ; ...