我做的2级联动下拉框

原创 2007年09月22日 21:58:00

这是我实现得联动下拉框实现了省级以及地区得联动

 

页面前台代码:

<%@ Page language="c#" Codebehind="DataBind.aspx.cs" AutoEventWireup="false"

Inherits="LinkageList.DataBind" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>WebForm1</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">
 </HEAD>
 <body>
  <script type="text/javascript" language="javascript">
   var xmlHttp;//声明全局得XmlHttpRequest对象
   var

provinceID=0;//省份ID
   function  createXmlHttp()
   {
  

  if(window.ActiveXObject)//判断浏览器是否IE
    {
  

   xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
    }
 

   else if(window.XMLHttpRequest)
    {
  

   xmlHttp=new XMLHttpRequest();
    }
  

 }
   
   //接收界面上选中得省份编号
   

function startRequest(slcprovinceID)
   {
    

createXmlHttp();
    provinceID=slcprovinceID;//传递给全局变量
   

 xmlHttp.onreadystatechange=readyStateHandler;
    xmlHttp.open

("POST",createQueryString(provinceID),true);
    xmlHttp.send(null);
   

}
   
   //异步读取数据
   function

readyStateHandler()
   { 
    //清空城市下

拉框
    clearCityList();
    if

(xmlHttp.readyState==4)
    {
     if

(xmlHttp.status==200)
     {
     

 //改变城市下拉框
      changeCity(provinceID);
  

   }
    }
   }
  

 
   function changeCity(provinceID)
   {
  

  clearCityList();
    //接收服务器异步回送得XmlDocument对象
 

   var xmlDoc=xmlHttp.responseXML;
    var

cityIDs=xmlDoc.getElementsByTagName("AreaID");
    var

citys=xmlDoc.getElementsByTagName("Name");
    
    

for(var i=0;i<citys.length;i++)
    {
     var

cityID=cityIDs[i].firstChild.nodeValue;
     var city=citys

[i].firstChild.nodeValue;
     var cityOption=new Option(city,cityID);
  

   
     document.forms

[0].ddlCity.options.add(cityOption);
    }
    
 

   document.forms[0].ddlCity.options[0].selected=true;
   }
 

  
   
   function clearCityList()
  

 {
    var myOptions=document.forms[0].ddlCity.options;
   

 
    for(var i=0;i<myOptions.length;i++)
    

{
     document.forms[0].ddlCity.options[i]=null;
   

 }
   }
   
   function

createQueryString(provinceID)
   {
    var

queryString="http://localhost/LinkageList/ReadCity.aspx?"+"provinceID="+provinceID;
    

return queryString;
   }
  </script>
  <form id="Form1" method="post" runat="server">
   <asp:Label Runat="server" ID="lblProvince">省份</asp:Label>
   <asp:DropDownList Runat="server" ID="ddlProvince"></asp:DropDownList>
   <asp:Label Runat="server" ID="lblCity">城市</asp:Label>
   <asp:DropDownList Runat="server" ID="ddlCity"></asp:DropDownList>
  </form>
 </body>
</HTML>

 

页面后台代码:

 

 


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;

using System.Data.SqlClient;

namespace LinkageList
{
 /// <summary>
 /// WebForm1 的摘要说明。
 /// </summary>
 public class DataBind : System.Web.UI.Page
 {
  protected System.Web.UI.WebControls.Label lblProvince;
  protected System.Web.UI.WebControls.DropDownList ddlProvince;
  protected System.Web.UI.WebControls.Label lblCity;
  protected System.Web.UI.WebControls.DropDownList ddlCity;
 
  private void Page_Load(object sender, System.EventArgs e)
  {
   if(!this.IsPostBack)
   {
    this.BindDropDownList();
    this.ddlProvince.Attributes.Add("onchange","startRequest(this.options[this.selectedIndex].value)"); 
   }
   else
   {
    this.ddlProvince.Attributes.Add("onchange","startRequest(this.options[this.selectedIndex].value)");
   }
  }


  private void BindDropDownList()
  {
   SqlConnection con=new SqlConnection("server=127.0.0.1;uid=sa;pwd=;database=Address");
   SqlCommand com=con.CreateCommand();
   com.CommandText="select * from area where ParentID=0";

   SqlDataAdapter adpt=new SqlDataAdapter();
   adpt.SelectCommand=com;

   DataSet ds=new DataSet();

   con.Open();
   try
   {
    adpt.Fill(ds);
   }
   catch(Exception ex)
   {
    
   }
   finally
   {
    con.Close();
   }

   this.ddlProvince.DataSource=ds;
   this.ddlProvince.DataMember=ds.Tables[0].TableName;
   this.ddlProvince.DataTextField="Name";
   this.ddlProvince.DataValueField="AreaID";
   this.ddlProvince.DataBind();
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
 }
}

 

服务器端被异步请求得页面前台没有任何代码 只有后台得代码:

 

 

 

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;
using System.Xml;
using System.Data.SqlClient;

namespace LinkageList
{
 /// <summary>
 /// ReadCity 的摘要说明。
 /// </summary>
 public class ReadCity : System.Web.UI.Page
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
   int provinceID=Convert.ToInt32(this.Request["provinceID"].ToString());
   this.Response.ContentType="text/xml";
   this.WriteXmlDoc(provinceID);
  }


  private void WriteXmlDoc(int provinceID)
  {
   SqlConnection con=new SqlConnection("server=127.0.0.1;uid=sa;pwd=;database=Address");
   SqlCommand com=con.CreateCommand();
   com.CommandText="select * from area where ParentID="+provinceID+"";

   SqlDataAdapter adpt=new SqlDataAdapter();
   adpt.SelectCommand=com;

   DataSet ds=new DataSet();

   con.Open();
   try
   {
    adpt.Fill(ds);
   }
   catch(Exception ex)
   {
    
   }
   finally
   {
    con.Close();
   }

   ds.WriteXml(this.Response.OutputStream);
   this.Response.End();
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
 }
}

 

数据库脚本如下:

 

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

CREATE TABLE [dbo].[Area] (
 [AreaID] [int] IDENTITY (1, 1) NOT NULL ,
 [Name] [nvarchar] (20) COLLATE Chinese_PRC_CI_AS NOT NULL ,
 [ParentID] [int] NULL
) ON [PRIMARY]
GO

 

 

数据库文件可以加我QQ索要

 

LArea三级联动,移动端使用

/css/LArea.css"> /css/LArea.min.css"> /js/LArea.js">     var area = newLArea();    area.init({...
  • DingYe_Names
  • DingYe_Names
  • 2017年08月24日 10:15
  • 967

weex 实现仿ios 三级联动地址选择器

  • 2017年08月25日 13:45
  • 131KB
  • 下载

二级联动菜单,简单实现

/** * jQuery Linkage Menu * * Copyright 2014, sunyingyuan * QQ: 1586383022 * Email: yingyuansun...
  • sunyingyuan
  • sunyingyuan
  • 2014年03月04日 10:16
  • 3587

Struts2 <s:doubleselect>级联下拉框 详解析

运行环境:myeclipse8.6+jboss5.1+jvm1.6 先看最后目录结构: 直接上源码: complexFormTag.jsp: 复杂表单标签使用范例 ...
  • itzyjr
  • itzyjr
  • 2012年12月26日 16:30
  • 5420

第22章、OnItemSelectedListener事件与二级联动(从零开始学Android)

在Android App应用中,二级联动是应用极为广泛的,我们在上一章的基础上来学习一下如何实现。   基本知识点:OnItemSelectedListener事件 一、界面    1、新建...
  • jianghuiquan
  • jianghuiquan
  • 2012年12月22日 14:46
  • 15912

Ajax实现下拉框二级级联

AJAX实现的简单的无刷新效果,页面中有两个下拉框,当第一个下拉框改变时,提交请求到后台,查找到对应的数据,添加到第二个下拉框列表里。代码如下: //Ajax实现下拉框二级级联,...
  • u011518709
  • u011518709
  • 2013年09月05日 14:05
  • 4534

ASP.NET——实现两个下拉框动态联动

这样的动态联动,一般由多个下拉框组成一组菜单,比如上面用到的两个下拉框。下拉菜单之间有联动的关系。当上级的选中项发生改变时,下级会根据上级中的选中项显示相应的内容。 用了动态联动之后,当面...
  • u010066934
  • u010066934
  • 2014年08月11日 16:10
  • 6224

springmvc 下拉框联动

最近接触到,下拉列表联动的小功能(ie,谷歌,QQ这三个浏览器已经测试,其他的没弄,有谁测过其他的可以反应一下,谢谢),自己研究了一下,下面贴一下代码和思路吧 springmvc的框架 东西很简单...
  • cr135810
  • cr135810
  • 2016年10月08日 18:59
  • 2671

2级联动下拉框

  • 2012年03月08日 11:33
  • 6KB
  • 下载

ThinkPHP + Ajax 实现2级联动下拉菜单

首先是数据库的设计。分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父...
  • miao0967020148
  • miao0967020148
  • 2016年04月17日 11:12
  • 815
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:我做的2级联动下拉框
举报原因:
原因补充:

(最多只允许输入30个字)