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. ...
随机推荐
- SharePoint的实体生成
生成Linq实体 使用SPMetal工具生成Linq to SharePoint实体 工具安装目录: C:\Program Files\Common Files\Microsoft Shared\We ...
- HDU 1158 Employment Planning
又一次看题解. 万事开头难,我想DP也是这样的. 呵呵,不过还是有进步的. 比如说我一开始也是打算用dp[i][j]表示第i个月份雇j个员工的最低花费,不过后面的思路就完全错了.. 不过这里还有个问题 ...
- Replication in Kafka
Replication简介 Kafka中的Replication功能是为了给每个partition提供备份,当某个Broker挂掉时可以迅速实现故障切换(failover).我们可以在创建或修改top ...
- mac出现一个白条
mac出现一个白条,除了finder没有任何程序运行,出现好几次了,怎么解决? 打开finder输中文出现 按esc键
- 使用phantomjs生成网站快照
http://phantomjs.org/ 昨天(2013/08/12)在代码区看到一个生成站点快照的代码,看了半天才发现,作者仅仅贴出来业务代码,最核心的生成快照图片的代码反而没有给出来. 以前记得 ...
- JVM——三个ClassLoader详解
类装载工作由ClassLoader及其子类负责,ClassLoader是一个重要的Java执行时系统组件,它负责在运行时查找和装入Class字节码文件.JVM在运行时会产生三个ClassLoader: ...
- JBPM4入门——6.流程实例的创建和执行
本博文只是简要对JBPM4进行介绍,如需更详细内容请自行google 链接: JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流 ...
- Shell教程5-Shell运算符
Bash 支持很多运算符,包括算数运算符.关系运算符.布尔运算符.字符串运算符和文件测试运算符. 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最 ...
- JS URL编码
JS URL编码escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码(xx等于该字符在 ...
- ASP.NET转换人民币大小金额
public class DecimalToRMB { /// <summary> /// 转换人民币大小金额 /// </sum ...