XmlHttp实现无刷新三联动ListBox

2023-10-08 15:58

本文主要是介绍XmlHttp实现无刷新三联动ListBox,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


1.html
< HTML >
    
< HEAD >
        
< title > XmlHttp实现无刷新三联动ListBox </ title >
        
< meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
        
< meta  name ="CODE_LANGUAGE"  Content ="C#" >
        
< meta  name ="vs_defaultClientScript"  content ="JavaScript" >
        
< meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
        
< SCRIPT  LANGUAGE ="JavaScript" >
            
<!--
                
//以XML求取ListBox2的数据
                function XmlPost2(obj)
                
{
                  
var svalue = obj.value;
                  
var webFileUrl = "?povinceid=" + svalue;
                  
var result = "";
                  
var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
                  xmlHttp.open(
"POST", webFileUrl, false);
                  xmlHttp.send(
"");
                  result 
= xmlHttp.responseText;
                  
                  
if(result != "")
                  
{
                    document.all(
"ListBox2").length=0;
                    
var piArray = result.split(",");
                    
for(var i=0;i<piArray.length;i++)
                    
{
                      
var ary1 = piArray[i].toString().split("|");
                      document.all(
"ListBox2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
                    }

                  }

                  
else
                  
{
                    alert(result);
                  }

                }

                
//以XML求取ListBox3的数据
                function XmlPost3(obj)
                
{
                  
var svalue = obj.value;
                  
var webFileUrl = "?cityid=" + svalue;
                  
var result = "";
                  
var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
                  xmlHttp.open(
"POST", webFileUrl, false);
                  xmlHttp.send(
"");
                  result 
= xmlHttp.responseText;
                  
                  
if(result != "")
                  
{
                    document.all(
"ListBox3").length=0;
                    
var piArray = result.split(",");
                    
for(var i=0;i<piArray.length;i++)
                    
{
                      
var ary1 = piArray[i].toString().split("|");
                      document.all(
"ListBox3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
                    }

                  }

                  
else
                  
{
                    alert(result);
                  }

                }
                
            
//-->
        
</ SCRIPT >
    
</ HEAD >
    
< body  MS_POSITIONING ="GridLayout" >
        
< form  id ="Form1"  method ="post"  runat ="server" >
            
< asp:ListBox  id ="ListBox1"  style ="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 16px"  runat ="server"
                Height
="448px"  Width ="200px" ></ asp:ListBox >
            
< asp:ListBox  id ="ListBox2"  style ="Z-INDEX: 102; LEFT: 352px; POSITION: absolute; TOP: 24px"  runat ="server"
                Height
="432px"  Width ="168px" ></ asp:ListBox >
            
< asp:ListBox  id ="ListBox3"  style ="Z-INDEX: 103; LEFT: 568px; POSITION: absolute; TOP: 24px"  runat ="server"
                Height
="424px"  Width ="200px" ></ asp:ListBox >
        
</ form >
    
</ body >
</ HTML >
2.cs代码
public   class  WebForm2 : System.Web.UI.Page
    
{
        
protected System.Web.UI.WebControls.ListBox ListBox1;
        
protected System.Web.UI.WebControls.ListBox ListBox2;
        
protected System.Web.UI.WebControls.ListBox ListBox3;
    
        
public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];
    
        
GetDataSet

        
property

        
Page_Load

        
down2_bind

        
down3_bind
        
        
down1_bind

        
Web Form Designer generated code
    }
3.数据库下载 /Files/singlepine/area.rar
4.数据库脚本(3,4随便一个就可以)
if   exists  ( select   *   from  dbo.sysobjects  where  id  =   object_id (N ' [dbo].[area] ' and   OBJECTPROPERTY (id, N ' IsUserTable ' =   1 )
drop   table   [ dbo ] . [ area ]
GO

if   exists  ( select   *   from  dbo.sysobjects  where  id  =   object_id (N ' [dbo].[city] ' and   OBJECTPROPERTY (id, N ' IsUserTable ' =   1 )
drop   table   [ dbo ] . [ city ]
GO

if   exists  ( select   *   from  dbo.sysobjects  where  id  =   object_id (N ' [dbo].[povince] ' and   OBJECTPROPERTY (id, N ' IsUserTable ' =   1 )
drop   table   [ dbo ] . [ povince ]
GO

CREATE   TABLE   [ dbo ] . [ area ]  (
    
[ id ]   [ int ]   NOT   NULL  ,
    
[ areaID ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ area ]   [ nvarchar ]  ( 60 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ father ]   [ nvarchar ]  ( 6 ) COLLATE Chinese_PRC_CI_AS  NULL  
ON   [ PRIMARY ]
GO

CREATE   TABLE   [ dbo ] . [ city ]  (
    
[ id ]   [ int ]   NOT   NULL  ,
    
[ cityID ]   [ nvarchar ]  ( 6 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ city ]   [ nvarchar ]  ( 50 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ father ]   [ nvarchar ]  ( 6 ) COLLATE Chinese_PRC_CI_AS  NULL  
ON   [ PRIMARY ]
GO

CREATE   TABLE   [ dbo ] . [ povince ]  (
    
[ id ]   [ int ]   NOT   NULL  ,
    
[ provinceID ]   [ nvarchar ]  ( 6 ) COLLATE Chinese_PRC_CI_AS  NULL  ,
    
[ province ]   [ nvarchar ]  ( 40 ) COLLATE Chinese_PRC_CI_AS  NULL  
ON   [ PRIMARY ]
GO
 

这篇关于XmlHttp实现无刷新三联动ListBox的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/166397

相关文章

Nginx实现高并发的项目实践

《Nginx实现高并发的项目实践》本文主要介绍了Nginx实现高并发的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用最新稳定版本的Nginx合理配置工作进程(workers)配置工作进程连接数(worker_co

python中列表list切分的实现

《python中列表list切分的实现》列表是Python中最常用的数据结构之一,经常需要对列表进行切分操作,本文主要介绍了python中列表list切分的实现,文中通过示例代码介绍的非常详细,对大家... 目录一、列表切片的基本用法1.1 基本切片操作1.2 切片的负索引1.3 切片的省略二、列表切分的高

基于Python实现一个PDF特殊字体提取工具

《基于Python实现一个PDF特殊字体提取工具》在PDF文档处理场景中,我们常常需要针对特定格式的文本内容进行提取分析,本文介绍的PDF特殊字体提取器是一款基于Python开发的桌面应用程序感兴趣的... 目录一、应用背景与功能概述二、技术架构与核心组件2.1 技术选型2.2 系统架构三、核心功能实现解析

使用Python实现表格字段智能去重

《使用Python实现表格字段智能去重》在数据分析和处理过程中,数据清洗是一个至关重要的步骤,其中字段去重是一个常见且关键的任务,下面我们看看如何使用Python进行表格字段智能去重吧... 目录一、引言二、数据重复问题的常见场景与影响三、python在数据清洗中的优势四、基于Python的表格字段智能去重

Spring AI集成DeepSeek实现流式输出的操作方法

《SpringAI集成DeepSeek实现流式输出的操作方法》本文介绍了如何在SpringBoot中使用Sse(Server-SentEvents)技术实现流式输出,后端使用SpringMVC中的S... 目录一、后端代码二、前端代码三、运行项目小天有话说题外话参考资料前面一篇文章我们实现了《Spring

Nginx中location实现多条件匹配的方法详解

《Nginx中location实现多条件匹配的方法详解》在Nginx中,location指令用于匹配请求的URI,虽然location本身是基于单一匹配规则的,但可以通过多种方式实现多个条件的匹配逻辑... 目录1. 概述2. 实现多条件匹配的方式2.1 使用多个 location 块2.2 使用正则表达式

使用Apache POI在Java中实现Excel单元格的合并

《使用ApachePOI在Java中实现Excel单元格的合并》在日常工作中,Excel是一个不可或缺的工具,尤其是在处理大量数据时,本文将介绍如何使用ApachePOI库在Java中实现Excel... 目录工具类介绍工具类代码调用示例依赖配置总结在日常工作中,Excel 是一个不可或缺的工http://

SpringBoot实现导出复杂对象到Excel文件

《SpringBoot实现导出复杂对象到Excel文件》这篇文章主要为大家详细介绍了如何使用Hutool和EasyExcel两种方式来实现在SpringBoot项目中导出复杂对象到Excel文件,需要... 在Spring Boot项目中导出复杂对象到Excel文件,可以利用Hutool或EasyExcel

Python如何实现读取csv文件时忽略文件的编码格式

《Python如何实现读取csv文件时忽略文件的编码格式》我们再日常读取csv文件的时候经常会发现csv文件的格式有多种,所以这篇文章为大家介绍了Python如何实现读取csv文件时忽略文件的编码格式... 目录1、背景介绍2、库的安装3、核心代码4、完整代码1、背景介绍我们再日常读取csv文件的时候经常

Golang中map缩容的实现

《Golang中map缩容的实现》本文主要介绍了Go语言中map的扩缩容机制,包括grow和hashGrow方法的处理,具有一定的参考价值,感兴趣的可以了解一下... 目录基本分析带来的隐患为什么不支持缩容基本分析在 Go 底层源码 src/runtime/map.go 中,扩缩容的处理方法是 grow