前台:

<form id="form1" runat="server">
<div>

<select id="Province">
<option>请选择</option>
</select>

<select id="City">
<option>请选择</option>
</select>
地区
<select id="Space">
<option>请选择</option>
</select>
<script type="text/javascript">
$(function () {
$.ajax({
url: "TestClass/Cascade.ashx?id=1",
async: false,
success: function (data) {
$("#Province").append(data);
$("#Province").change(function () {
$.ajax({
url: "TestClass/Cascade.ashx?id=2",
data: { pid: $("#Province").attr("value") },
success: function (data) {
$("#City").html("");
$("#City").append(data);
$("#City").change(
function () {
$.ajax({
url: "TestClass/Cascade.ashx?id=3",
data: { cid: $("#City").attr("value") },
success: function (data) {
$("#Space").html("");
$("#Space").append(data);
}
})
})
}
})
})
}
})
})
</script>
</div>
</form>

后台:

  public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request.QueryString["id"] == "")
{
string sql = "SELECT ID,[enname] FROM [ProvinceInfo] WHERE ParentId=0";
StringBuilder sb = new StringBuilder();
SqlDataReader reader = PubSqlHelperFunc.ExecuteSqlDataReader(CommandType.Text, sql, null);
while (reader.Read())
{
sb.Append("<option value=");
sb.Append(reader["Id"]);
sb.Append(">");
sb.Append(reader["enname"]);
sb.Append("</option>");
}
reader.Close();
context.Response.Write(sb.ToString());
}
else if (context.Request.QueryString["id"] == "")
{
string sql = "SELECT ID,[enname] FROM [ProvinceInfo] WHERE ParentId=" + context.Request.Params["pid"] + "";
StringBuilder sb = new StringBuilder();
sb.Append("<option>请选择</option>");
SqlDataReader reader = PubSqlHelperFunc.ExecuteSqlDataReader(CommandType.Text, sql, null);
while (reader.Read())
{
sb.Append("<option value=");
sb.Append(reader["Id"]);
sb.Append(">");
sb.Append(reader["enname"]);
sb.Append("</option>");
}
reader.Close();
context.Response.Write(sb.ToString());
}
else if (context.Request.QueryString["id"] == "")
{
string sql = "SELECT ID,[enname] FROM [ProvinceInfo] WHERE ParentId=" + context.Request.Params["cid"] + "";
StringBuilder sb = new StringBuilder();
sb.Append("<option>请选择</option>");
SqlDataReader reader = PubSqlHelperFunc.ExecuteSqlDataReader(CommandType.Text, sql, null);
while (reader.Read())
{
sb.Append("<option value=");
sb.Append(reader["Id"]);
sb.Append(">");
sb.Append(reader["enname"]);
sb.Append("</option>");
}
reader.Close();
context.Response.Write(sb.ToString());
}
}

JS制作的简单的三级及联的更多相关文章

  1. three.js 制作一个简单的圆柱体模型

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - or ...

  2. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  3. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. css制作最简单导航栏

    css制作最简单导航栏

  6. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  7. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  8. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  9. HTML+纯JS制作音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...

随机推荐

  1. UVa 297 (四分树 递归) Quadtrees

    题意: 有一个32×32像素的黑白图片,用四分树来表示.树的四个节点从左到右分别对应右上.左上.左下.右下的四个小正方区域.然后用递归的形式给出一个字符串代表一个图像,f(full)代表该节点是黑色的 ...

  2. Odoo 的库存管理与OpenERP之前的版本有了很大的不同,解读Odoo新的WMS模块中的新特性

    原文来自:http://shine-it.net/index.php/topic,16409.0.html 库存移动(Stock Move)新玩法Odoo的库存移动不仅仅是存货在两个“存货地点”之间的 ...

  3. (转)IOS UITableView学习

    转自:http://www.cnblogs.com/smileEvday/archive/2012/06/28/tableView.html          作者:一片枫叶 看TableView的资 ...

  4. python numpy array 的一些问题

    1 将list转换成array 如果list的嵌套数组是不规整的,如 a = [[1,2], [3,4,5]] 则a = numpy.array(a)之后 a的type是ndarray,但是a中得元素 ...

  5. Android 程序员必须掌握的三种自动化测试方法

    在日常的开发中,尤其是app开发,因为不像web端那样 出错以后可以热更新,所以app开发 一般对软件质量有更高的要求(你可以想一下 一个发出去的版本如果有重大缺陷 需要强制更新新客户端是多么蛋疼的事 ...

  6. Java 中无参带返回值方法的使用

    如果方法不包含参数,但有返回值,我们称为无参带返回值的方法. 例如:下面的代码,定义了一个方法名为 calSum ,无参数,但返回值为 int 类型的方法,执行的操作为计算两数之和,并返回结果 在 c ...

  7. jquery validate如何不提交表单就做验证(ajax提交数据)

    if($("#FromID").valid()){ $.ajax({ type:'post', url:'/CampaignOrderRelations/save', data:{ ...

  8. 网络编辑基础:对HTTP协议的头信息详解

    HTTP(HyperTextTransferProtocol) 是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP 协议的详细内容请参 考RFC2616.HTTP协议采用了请求/响应模型 ...

  9. 脚本乐园 Shell中命令行选项和参数的处理

    在Linux的Shell中怎样处理tail -n 10 access.log这样的命令行选项呢?这是被别人问起的一个问题,好好学习了一下,进行总结如下:在bash中,可以用以下三种方式来处理命令行参数 ...

  10. XSS 前端防火墙(1):内联事件拦截

    关于 XSS 怎样形成.如何注入.能做什么.如何防范,前人已有无数的探讨,这里就不再累述了.本文介绍的则是另一种预防思路. 几乎每篇谈论 XSS 的文章,结尾多少都会提到如何防止,然而大多万变不离其宗 ...