JS制作的简单的三级及联
前台:
<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制作的简单的三级及联的更多相关文章
- three.js 制作一个简单的圆柱体模型
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - or ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 基于node.js制作爬虫教程
前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- css制作最简单导航栏
css制作最简单导航栏
- 用JS制作一个信息管理平台完整版
前 言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
- 利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
- JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
- HTML+纯JS制作音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...
随机推荐
- bzoj3668: [Noi2014]起床困难综合症
从高位到低位枚举期望的应该是ans最高位尽量取一.如果该数最高位为o的话能够取得1直接更新ans否则判断该位取1是否会爆m不会的话就加上. #include<cstdio> #includ ...
- Windows系统下Memcached缓存系列一:Couchbase(服务器端)和CouchbaseClient(c#客户端)的安装教程
一:服务器端的安装 官网 http://www.couchbase.com/download 我的电脑是64位的win7,找到对应下载windows版本的服务器端缓存,大概90M的样子 运行期间可 ...
- laravel5 centos6.4下的配置体验
1. 安装lmnp环境: nginx version: nginx/1.6.0. php 5.5.7 . centos6.42. laravel-v5.1.4 一键安装包,在使用composer 安装 ...
- 09day2
多米诺骨牌 递推+高精度 [问题描述] Jzabc 对多米诺骨牌有很大兴趣,然而他的骨牌比较特别,只有黑色的和白色的两种.他觉得如果存在连续三个骨牌是同一种颜色,那么这个骨牌排列便是不美观的.现在他有 ...
- jQuery事件绑定方式(转)
bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多 ...
- Java核心技术II读书笔记(二)
ch2 XML 有两种XML文档结构,DTD和Schema,用解释文档构成规则,这些规则指定了每个元素俺的合法子元素和属性. DTD DTD有多种提供方式,可以像下面这样加到XML中: <?xm ...
- [转]Linux read用法
来源:http://www.cnblogs.com/iloveyoucc/archive/2012/04/16/2451328.html 1.基本读取 read命令接收标准输入(键盘)的输入,或其他文 ...
- xcode的ios工程目录结构
目录结构: a.supporting files: main.m和资源文件 xxx-info.plist:包含应用程序相关属性列表,如版本,程序名等 .pch文件:预编译头文件,相当于MFC里的std ...
- centos 安装mysql 登录进提示 Access denied for user 'root'@'localhost' (using password: NO)
# service mysqld stop # mysqld_safe --user=mysql --skip-grant-tables --skip-networking & # mysql ...
- linux log4j 使用
1.首先到Apache官网下载log4j.jar文件http://logging.apache.org/log4j/1.2/download.html 引用到eclipse项目里面 2.在src目录下 ...