前台:

<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 10361 Automatic Poetry

    Automatic Poetry Input: standard input Output: standard output Time Limit: 2 seconds Memory Limit: 3 ...

  2. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  3. linux中备份mysql数据库的一个shell脚本

    #!/bin/bash #FileName:select_into_bak.sh #Desc:Use select into outfile to backup db or tables #Creat ...

  4. mysql 数据库常用命令总结

    (1)查看数据库可以支持的存储引擎  命令:show engines;  (2)查看表结构命令:desc table_name:(3)显示表的创建语句     show create table ta ...

  5. notepad 行替换使用指南

    notepad++是开源的文本处理软件,性能堪比ultraedit,不过在转用notepad++之后一直为他的行替换功能纠结,UE当中只需要用 [^p] 就可以表示一行,但是在notepad++当中, ...

  6. 配置Linux 11G R2 RAC NTP服务

    安装Oracle 11g RAC时,我们需要配置ntp服务.在使用虚拟机的情况下对于时钟同步方式的配置有很多种方式,可以使用vmware自带的时钟同步功能,也可以直接将本地的一个节点用作时间服务器.本 ...

  7. java-No exception of type ConfigurationException can be thrown; an exception type must be a subclass of Throwable

    功能:读配置文件 java菜鸟:导入工程在报名处就开始报错,第一次遇到 import org.apache.commons.lang3.StringUtils; import org.apache.c ...

  8. 【转】JavaSript模块规范 - AMD规范与CMD规范介绍

    JavaSript模块化   在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?       模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题 ...

  9. 通过反射执行get、set方法

    Class clazz = sourceObj.getClass(); 1.获取所有属性 BeanInfo beanInfo = Introspector.getBeanInfo(clazz); Pr ...

  10. REST构架风格介绍:状态表述转移

    REST(Representational State Transfer)是HTTP协议的作者Roy Fielding博士在其博士论文中提出的一种互联网应用构架风格.与以远程对象为核心的ORB和以服务 ...