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"] == "1")
            {
                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"] == "2")
            {
                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"] == "3")
            {
                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());
            }
        }
时间: 2024-10-13 10:36:11

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

js制作一个简单的选项卡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的选项卡</title> <style type="text/css"> #main{ height: 400px; width: 400px; margin: 20px auto; } #main>div{ height: 300px; width: 3

基于Flask/RethinkDB/Backbone.js实现TODO List 使用 RethinkDB,Flask 与 Backbone.js 制作一个简单的 todo list。

第1节 技术栈介绍 第2节 RethinkDB 10分钟入门 RethinkDB 10分钟入门 第3节 Backbone.js 10分钟入门 第4节 搭建应用框架 第5节 设计模型与接口 第6节 完成前端部分-大功告成!

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

使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

制作一个简单的文本框输入的网页

题目:制作一个简单的网页(包含一个文本框.一个按钮),在页面上输出用户在文本框输入的内容,要求用JavaScript获取文本框内容. 一.首先利用html在网页上制作表单,代码如下: **onclick事件:onclick 事件会在对象被点击时发生. 二.利用js获取输入信息,并将其输出: 相关知识: 1.给用户确认消息,真正实现交互,使用语句confirm();给用户提示信息,实现单向通信,使用语句alert(). 三.运行结果: 1.用浏览器打开结果如下: 2.输入文本框内容,点击[提交]:

使用node.js制作简易爬虫

最近看了些node.js方面的知识,就像拿它来做些什么.因为自己喜欢摄影,经常上蜂鸟网,所以寻思了一下,干脆做个简单的爬虫来扒论坛的帖子. 直接上代码吧. 1 var sys = require("sys"), 2 http = require("http"), 3 fs = require("fs"); 4 var url = "http://newbbs.fengniao.com/forum/forum_125.html"

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

利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet' h

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

  前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 1.1  什么是JSON JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后,可以将JSON字符串,再解析为JSON对象. JSON对象的使用与JS中的对象基本相同,唯一需要区别的是,JSON中的键

php+lottery.js制作九宫格抽奖实例

php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <script type="text/javascript" src="js/lottery.js"></script> 开始抽奖函数start_lottery() 1 function start_lottery(){ 2 if(flag){ 3 //alert

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步:  通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt