当前位置: 首页 > 编程日记 > 正文

Ajax实现无刷新三联动下拉框


1.html代码
<HTML>
    
<HEAD>
        
<title>Ajax实现无刷新三联动下拉框</title>
        
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
        
<meta content="C#" name="CODE_LANGUAGE">
        
<meta content="JavaScript" name="vs_defaultClientScript">
        
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
        
<SCRIPT language="javascript">            
            
//城市------------------------------
            function cityResult() 
            

                
var city=document.getElementById("DropDownList1");
                AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
            }

            
            
function get_city_Result_CallBack(response)
            
{
                
if (response.value != null)
                
{                    
                    
//debugger;
                    document.all("DropDownList2").length=0;                
                
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    
{
                        
var name=ds.Tables[0].Rows[i].city;
                      
var id=ds.Tables[0].Rows[i].cityID;
                      document.all(
"DropDownList2").options.add(new Option(name,id));
                    }

                    }

                }
                
                
return
            }

            
//市区----------------------------------------
            function areaResult() 
            

                
var area=document.getElementById("DropDownList2");
                AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
            }

            
function get_area_Result_CallBack(response)
            
{
                
if (response.value != null)
                
{                    
                    document.all(
"DropDownList3").length=0;                
                
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=0; i<ds.Tables[0].Rows.length; i++)
                    
{
                      
var name=ds.Tables[0].Rows[i].area;
                      
var id=ds.Tables[0].Rows[i].areaID;
                      document.all(
"DropDownList3").options.add(new Option(name,id));
                    }
                
                    }

                }

                
return
            }

            
function getData()
            
{
                
var province=document.getElementById("DropDownList1");
                
var pindex = province.selectedIndex;
                
var pValue = province.options[pindex].value;
                
var pText  = province.options[pindex].text;
                
                
var city=document.getElementById("DropDownList2");
                
var cindex = city.selectedIndex;
                
var cValue = city.options[cindex].value;
                
var cText  = city.options[cindex].text;
                
                
var area=document.getElementById("DropDownList3");
                
var aindex = area.selectedIndex;
                
var aValue = area.options[aindex].value;
                
var aText  = area.options[aindex].text;
                
                
var txt=document.getElementById("TextBox1");                                

                document.getElementById(
"<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
            }

        
</SCRIPT>
    
</HEAD>
    
<body ms_positioning="GridLayout">
        
<form id="Form1" method="post" runat="server">
            
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"
                cellPadding
="1" width="300" border="1" bgColor="#ccff66">
                
<TR>
                    
<TD>省市</TD>
                    
<TD><asp:dropdownlist id="DropDownList1" runat="server"></asp:dropdownlist></TD>
                
</TR>
                
<TR>
                    
<TD>城市</TD>
                    
<TD><asp:dropdownlist id="DropDownList2" runat="server"></asp:dropdownlist></TD>
                
</TR>
                
<TR>
                    
<TD>市区</TD>
                    
<TD><asp:dropdownlist id="DropDownList3" runat="server"></asp:dropdownlist></TD>
                
</TR>
            
</TABLE>
            
<asp:TextBox id="TextBox1" style="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat="server"
                Width
="424px"></asp:TextBox><INPUT style="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"
                type
="button" value="test" onclick="getData();">
        
</form>
    
</body>
</HTML>
2.cs代码
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace AjaxTest
{
    
/// <summary>
    
/// Summary description for WebForm1.
    
/// </summary>

    public class WebForm1 : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.DropDownList DropDownList1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList2;
        
protected System.Web.UI.WebControls.TextBox TextBox1;
        
protected System.Web.UI.WebControls.DropDownList DropDownList3;
    
        
private void Page_Load(object sender, System.EventArgs e)
        
{    
            Ajax.Utility.RegisterTypeForAjax(
typeof(AjaxMethod));
            
if(!Page.IsPostBack)
            
{
                
this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();
                
this.DropDownList1.DataTextField="province";
                
this.DropDownList1.DataValueField="provinceID";
                
this.DropDownList1.DataBind();
                
                
this.DropDownList1.Attributes.Add("onclick","cityResult();");
                
this.DropDownList2.Attributes.Add("onclick","areaResult();");
            }

        }


        
Web Form Designer generated code        
    }

}
3.AjaxMethod
using System;
using System.Data;
using System.Data.SqlClient;
namespace AjaxTest
{
    
/// <summary>
    
/// Summary description for AjaxMethod.
    
/// </summary>

    public class AjaxMethod
    
{
        
GetProvinceList

        
GetCityList

        
GetAreaList
    
        
GetDataSet
    }

}
4.web.config
<httpHandlers>
            
<add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax" />
    
</httpHandlers>
5.ajax.dll下载/Files/singlepine/Ajax.rar
6.真实数据库下载area1.rar
7.源代码下载AjaxTest.rar

相关文章:

用算法改造过的植物肉,有兴趣试试么?

来源 | HyperAI超神经责编 | 晋兆雨头图 | CSDN 下载自视觉中国本月初&#xff0c;麦当劳宣布&#xff0c;将于 2021 年推出植物肉全新产品线 McPlant&#xff0c;新品品类将包括汉堡、鸡肉替代品以及早餐三明治。事实上&#xff0c;麦当劳并不是尝试植物基产品的首家快餐店&am…

浅谈软件自动化集成测试的流程

浅谈自动化集成测试相信从事软件测试专业的同行很早就知道了自动化的测试技术&#xff0c;也许大家也很想知道具体的软件自动化具体的运行实施过程。本人学识尚欠&#xff0c;目前无法对综合的软件自动化的测试进行阐述&#xff0c;但是本人通过不同的书籍对软件自动化的集成测…

web聊天室总结

前言: 最近在写一个聊天室的项目&#xff0c;前端写了挺多的JS(function)&#xff0c;导致有点懵比&#xff0c;出了BUG&#xff0c;也迟迟找不到。所以昨天把写过的代码总结了一下&#xff0c;写成博客。 项目背景 参考博客: http://www.cnblogs.com/alex3714/articles/533763…

概率图论PGM的D-Separation(D分离)

为什么80%的码农都做不了架构师&#xff1f;>>> 本文大部分来自&#xff1a;http://www.zhujun.me/d-separation-separation-d.html 其中找了一些资料发现原文中阻塞&#xff08;block&#xff09;中&#xff08;b&#xff09;部分有出路&#xff0c;黑体部分修改…

CSDN湘苗培优|高起点步入职场,快人一步!

课程了解3个培养阶段结束后&#xff0c;让你具备&#xff1a;解决问题能力、交付能力、有经验。系统基础训练&#xff08;阶段一&#xff09;•内容&#xff1a;程序逻辑基础、计算机原理、操作系统工作原理、C语言&#xff08;掌握内存的分配&#xff09;、密码学、信息论、概…

php与Ajax实例

****************AJAX的学习要有JavaScript、HTML、CSS等基本的Web开发能力**************** [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁&#xff0c;就可以动态地更新。使用Ajax&#xff0c;用户可以创建…

[转]构建基于WCF Restful Service的服务

本文转自&#xff1a;http://www.cnblogs.com/scy251147/p/3566638.html 前言 传统的Asmx服务&#xff0c;由于遵循SOAP协议&#xff0c;所以返回内容以xml方式组织。并且客户端需要添加服务端引用才能使用&#xff08;虽然看到网络上已经提供了这方面的Dynamic Proxy&#xff…

Ajax使用初步

Ajax定义为“Asynchronous JavaScript XML”的简称&#xff0c;也就是异步的JavaScript和XML处理。从原理上看&#xff0c;主要是Ajax可以通过调用HttpRequest实现与服务器的异步通讯&#xff0c;并最终在网页中实现丰富友好的用户界面Ajax使用初步&#xff0c;配置步骤1.把Aj…

AI化身监工,上班还能摸鱼吗?

来源 | 人民数字FINTECH责编 | 晋兆雨头图 | CSDN 下载自视觉中国俗话说“上班摸鱼一时爽&#xff0c;一直摸鱼一直爽。”上班族这群“时间管理大师们”往往能在上班的时间中挤出一半的时间来摸鱼&#xff1a;在距离上班时间的最后一分钟打卡&#xff0c;午饭时间未到就打开各大…

解决“安装程序无法定位现有系统分区,也无法创建新的系统分区”的方法

使用老毛桃PE格式化C盘后安装Win7出现“安装程序无法定位现有系统分区,也无法创建新的系统分区”的错误。本文给出了我遇到该情况的解决办法&#xff0c;亲身经历&#xff0c;绝非抄袭。 在网上看了好多办法&#xff0c;都无效。最后竟然用下面的方法成功了&#xff1a; 1. 使用…

Linux 上 12 个高效的文本过滤命令

在这篇文章中&#xff0c;我们将会看一些 Linux 中的过滤器命令行工具。过滤器是一个程序&#xff0c;它从标准输入读取数据&#xff0c;在数据上执行操作&#xff0c;然后把结果写到标准输出。 因此&#xff0c;它可以用来以强大的方式处理信息&#xff0c;例如重新结构化输出…

linux在多核处理器上的负载均衡原理

原文出处&#xff1a;http://donghao.org/uii/ 【原理】 现在互联网公司使用的都是多CPU&#xff08;多核&#xff09;的服务器了&#xff0c;Linux操作系统会自动把任务分配到不同的处理器上&#xff0c;并尽可能的保持负载均衡。那Linux内核是怎么做到让各个CPU的压力均匀的呢…

完全免费,简化版Plotly推出,秒绘各类可视化图表

作者 | Peter来源 | Python编程时光今天给大家推荐一个可视化神器 - Plotly_express &#xff0c;上手非常的简单&#xff0c;基本所有的图都只要一行代码就能绘出一张非常酷炫的可视化图。以下是这个神器的详细使用方法&#xff0c;文中附含大量的 GIF 动图示例图。环境准备本…

Linux 启动过程详解

说明&#xff1a;由于图片太大&#xff0c;上传博客的图片是jpg格式的有点失真&#xff0c;看不清楚&#xff0c;可以双击打开查看&#xff0c;有朋友想看高清&#xff0c;无码&#xff0c;无水印的大图&#xff08;png格式&#xff09;请下载附件&#xff01;转载于:https://b…

java web项目优化记录:优化考试系统

考试系统在进行压力測试时发现&#xff0c;并发量高之后出现了button无反应。试题答案不能写到数据库的问题&#xff0c;于是针对这些核心问题&#xff0c;进行了优化。 数据库方面&#xff1a; Select语句&#xff1a;Select * from TEB_VB_XZTRecord改为select 必须的列 form…

深度学习中的注意力机制(三)

作者 | 蘑菇先生来源 | NewBeeNLP原创出品 深度学习Attenion小综述系列&#xff1a;深度学习中的注意力机制&#xff08;一&#xff09; 深度学习中的注意力机制&#xff08;二&#xff09;目前深度学习中热点之一就是注意力机制&#xff08;Attention Mechanisms&#xff…

程序分析工具gprof介绍

程序分析是以某种语言书写的程序为对象&#xff0c;对其内部的运作流程进行分析。程序分析的目的主要有三点&#xff1a;一是通过程序内部各个模块之间的调用关系&#xff0c;整体上把握程序的运行流程&#xff0c;从而更好地理解程序&#xff0c;从中汲取有价值的内容。二是以…

hadoop源码datanode序列图

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/u/572882/blog/134796

HDU 2206 IP的计算(字符串处理)

题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid2206 Problem Description在网络课程上&#xff0c;我学到了非常多有关IP的知识。IP全称叫网际协议&#xff0c;有时我们又用IP来指代我们的IP网络地址&#xff0c;如今IPV4下用一个32位无符号整数来表示&#…

有规律格式化文本文件插入数据库

现有以下文本文件: *理光(深圳)工业发展有限公司(D15)(位于福田区)1.厨师1名;男;30岁以下;高中以上学历;中式烹调师中级以上&#xff0c;需备齐身份证/毕业证/流动人口婚育证明原件及复印件1份.经公司体检不合格者将不予录用&#xff0c;不合格者体检费自理.福利及待遇:工作时…

java使用uploadify上传文件

一、简介Uploadify是JQuery的一个上传插件&#xff0c;实现的效果非常不错&#xff0c;带进度显示&#xff1b;可以上传多个文件&#xff1b;详细的使用方法网上有很多&#xff0c;建议到官网参考&#xff0c;这里仅仅展示其使用的效果&#xff1b;官网&#xff1a;www.uploadi…

微软亚洲研究院成立OpenNetLab,探索以“数据为中心”AI网络研究新范式!

2020年12月18日&#xff0c;微软亚洲研究院宣布联合清华大学、北京大学、南京大学、兰州大学、新加坡国立大学、首尔国立大学等多所亚洲地区高校&#xff0c;成立OpenNetLab开放网络平台联盟。 OpenNetLab官网地址&#xff1a;https://opennetlab.org/ 通过为研究人员提供通用的…

圆角文本框的制作

把border&#xff1a;0px;outline:none;就可以清除边框。然后在外面放一个圆角div&#xff0c;文本框在div内居中的话能够&#xff0c;设置行高和text-align:center。或者也能够在背景图上放文本框。

微软收购 GitHub 两年后,大咖共论开源新生态

头图 | CSDN 下载自视觉中国被微软收购两年的GitHub&#xff0c;现在怎么样了&#xff1f;据《 2020 年度 GitHub Octoverse 报告》显示&#xff0c;GitHub 上开发者数量达到 5600 万&#xff0c;新增 6000 万个存储库以及 19 亿个 contribution。GitHub 预计到 2025 年&#x…

网页中如何获取客户端系统已安装的所有字体?

如何获取系统字体&#xff1f;1.首先在需要获取系统字体的网页<body>后加入以下代码&#xff1a;<DIV style"LEFT: 0px; POSITION: absolute; TOP: 0px"><OBJECT ID"dlgHelper" CLASSID"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b&q…

Web开发常见的软件架构

Web开发常见的软件架构 一、看需求分析&#xff0c;看产品PRD&#xff1a;Product Requirement Document 二、根据PRD和产品原型建数据库表,注意三范式要求,用工具到处数据库关系图&#xff0c;并快速地理清数据库思路 三、搭建项目架构&#xff0c;常用三层&#xff0c;自动…

thinkphp整合系列之gulp实现前端自动化

这又是一个一次整合终身受益&#xff1b;不止是终身&#xff1b;换个项目同样可以很方便复用&#xff1b;不信你看另一个项目&#xff1a; thinkphp整合系列之gulp实现前端自动化 虽然我等叫php程序猿&#xff1b;但是不可避免的是要跟html打交道的&#xff1b;而且php这么容易…

网上几种常见校验码图片分析

前几天受刺激了&#xff0c;准备把CSDN的校验码图片修改。就上网找了一些参考示例。和分析了一些校验码的功能。不敢独享&#xff0c;整理到一起&#xff0c;跟大家分享。 至于CSDN新的校验码写法&#xff0c;不是这里面的任何一种。也不是网上可以找到的。这个不好公开&#…

语言都是相通的,学好一门语言,再学第二门语言就很简单,记录一下我复习c语言的过程。...

语言都是相通的&#xff0c;学好一门语言&#xff0c;再学第二门语言就很简单&#xff0c;记录一下我复习c语言的过程。为了将本人的python培训提高一个层次&#xff0c;本人最近买了很多算法的书.这个书上的代码基本都是c语言实现的&#xff0c;c语言很久没有用了&#xff0c;…

百度飞桨全新升级:重磅推出PaddleHelix平台、开源框架V2.0RC,硬件生态路线图全公开...

12月20日&#xff0c;WAVE SUMMIT2020深度学习开发者峰会在北京举办。本届峰会&#xff0c;百度飞桨带来八大全新发布与升级&#xff0c;有支持前沿技术探索和应用的生物计算平台PaddleHelix螺旋桨&#xff0c;开发更加便捷的飞桨开源框架2.0 RC版&#xff0c;端云协同的AI集成…