`

实现无刷新闪烁二级联动下拉菜单

阅读更多


先建立2个表



--父表
create table tb_parent(
--主键
ids int constraint pk_tb_parent_ids primary key,
parentName 
nvarchar(1000)
)
go

insert into tb_parent
    
select 1,'aaa'
    
union all
    
select 2,'bbb'
    
union all
    
select 3,'ccc'
go

 


--子表
create table tb_child(
parentId 
int  ,
childId 
int ,
childName 
nvarchar (1000),
--parentId外键
constraint fk_tb_child_tb_parent_parentId 
    
FOREIGN KEY (parentId)     
        
REFERENCES tb_parent(ids)
)
go


insert into tb_child
    
select 1,101,'a_1'
    
union all
    
select 1,102,'a_2'
go
insert into tb_child
    
select 2,201,'b_1'
    
union all
    
select 2,202,'b_2'
go
insert into tb_child
    
select 3,301,'c_1'
    
union all
    
select 3,302,'c_2'
    
union all
    
select 3,303,'c_3'
go

再创建3个过程


--得到父表数据
create proc proc_GetparentData
as
SELECT [ids][parentName] 
    
FROM [tb_parent]
go


--得到子表数据
create proc proc_GetchildData
as
SELECT [parentId][childId][childName] 
    
FROM [tb_child]
go

--由父id得到子表数据
create proc proc_GetchildDataBYparentId
@parentId int
as
SELECT [parentId][childId][childName] 
    
FROM [tb_child]
    
where parentId=@parentId
go

WebForm5.aspx

 1 <%@ Page language="c#" Codebehind="WebForm5.aspx.cs" AutoEventWireup="false" Inherits="webtest.WebForm5" %>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3 <HTML>
 4     <HEAD>
 5         <title>WebForm5</title>
 6         <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
 7         <meta content="C#" name="CODE_LANGUAGE">
 8         <meta content="JavaScript" name="vs_defaultClientScript">
 9         <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
10     </HEAD>
11     <body MS_POSITIONING="GridLayout">
12         <form id="Form1" method="post" runat="server">
13             父:<asp:dropdownlist id="DropDownList_parent" runat="server" onChange="changevalue(document.Form1.DropDownList_parent.options[document.Form1.DropDownList_parent.selectedIndex].value)"
14                 Width="272px"></asp:dropdownlist>
15             <br>
16             子:<asp:dropdownlist id="DropDownList_child" runat="server" Width="272px"></asp:dropdownlist>
17             <br>
18             <asp:label id="msgLabel" runat="server" Width="416px"></asp:label>
19             <br>
20             <asp:Button id="Buttonok" runat="server" Text="click"></asp:Button></form>
21     </body>
22 </HTML>

WebForm5.aspx.cs

  1using System;
  2using System.Collections;
  3using System.ComponentModel;
  4using System.Data;
  5using System.Data.SqlClient;
  6using System.Drawing;
  7using System.Web;
  8using System.Web.SessionState;
  9using System.Web.UI;
 10using System.Web.UI.WebControls;
 11using System.Web.UI.HtmlControls;
 12using System.Text;
 13
 14using Microsoft.ApplicationBlocks.Data;
 15
 16namespace webtest
 17{
 18    public class WebForm5 : System.Web.UI.Page
 19    {
 20        protected System.Web.UI.WebControls.DropDownList DropDownList_parent;
 21        protected System.Web.UI.WebControls.DropDownList DropDownList_child;
 22        
 23        protected System.Web.UI.WebControls.Label msgLabel;
 24        protected System.Web.UI.WebControls.Button Buttonok;
 25
 26        readonly string conString="uid=sa;pwd=123;database=TestDataBase";
 27    
 28        private void Page_Load(object sender, System.EventArgs e)
 29        {    
 30                regJS();
 31                Bind();
 32        }

 33
 34        private void regJS()
 35        {
 36            SqlDataReader rs=this.GetchildData();
 37            StringBuilder sb=new StringBuilder(1000);
 38
 39            sb.Append("<Script Language=JavaScript>");
 40            sb.Append(Environment.NewLine);
 41            
 42            sb.Append("arr=new Array();");
 43            sb.Append(Environment.NewLine);
 44            
 45            int i=0;
 46            while(rs.Read())
 47            {
 48                sb.AppendFormat("arr[{0}]=new Array('{1}','{2}','{3}')",i,rs["parentId"],rs["childId"],rs["childName"]);
 49                sb.Append(Environment.NewLine);
 50                i=i+1;
 51            }

 52            
 53            if ( !rs.IsClosed )
 54            {
 55                rs.Close();
 56            }

 57
 58            sb.Append(Environment.NewLine);
 59            sb.AppendFormat("var counts={0}",i);
 60            sb.Append(Environment.NewLine);
 61            sb.Append("function changevalue(parentId)");
 62            sb.Append(Environment.NewLine);
 63            sb.Append("{");
 64            sb.Append(Environment.NewLine);
 65            sb.Append("document.Form1.DropDownList_child.length = 0;");
 66            sb.Append(Environment.NewLine);
 67            sb.Append("var i;");
 68            sb.Append(Environment.NewLine);
 69            sb.Append("for(i=0; i<counts; i++)");
 70            sb.Append(Environment.NewLine);
 71            sb.Append("{");
 72            sb.Append(Environment.NewLine);
 73            sb.Append("if(arr[i][0]==parentId)");
 74            sb.Append(Environment.NewLine);
 75            sb.Append("{");
 76            sb.Append(Environment.NewLine);
 77            sb.Append("document.Form1.DropDownList_child.options[document.Form1.DropDownList_child.length]=new Option(arr[i][2],arr[i][1]);");
 78            sb.Append(Environment.NewLine);
 79            sb.Append("}");
 80            sb.Append(Environment.NewLine);
 81            sb.Append("}");
 82            sb.Append(Environment.NewLine);
 83            sb.Append("}");
 84            sb.Append(Environment.NewLine);
 85            sb.Append("</script>");            
 86                        
 87            if!Page.IsClientScriptBlockRegistered("jsScript"))            
 88            {
 89                this.RegisterClientScriptBlock("jsScript",sb.ToString());
 90            }

 91        }

 92
 93        void Bind()
 94        {
 95            //获得父表
 96            this.DropDownList_parent.DataSource=SqlHelper.ExecuteReader(conString,CommandType.StoredProcedure,"proc_GetparentData");
 97            this.DropDownList_parent.DataTextField="parentName";
 98            this.DropDownList_parent.DataValueField="ids";
 99            this.DropDownList_parent.DataBind();
100
101            //根据父表id得子表
102            this.DropDownList_child.DataSource=GetchildData(Convert.ToInt32(this.DropDownList_parent.SelectedValue));
103            this.DropDownList_child.DataTextField="childName";
104          
分享到:
评论

相关推荐

    asp.net无刷新二级联动下拉菜单

    ### ASP.NET 无刷新二级联动下拉菜单实现详解 #### 一、背景介绍与需求分析 在Web开发中,为了提升用户体验,实现页面元素的动态加载成为了一个重要的环节。其中,“二级联动下拉菜单”是一种常见的功能设计,尤其...

    最简单js代码实现select二级联动下拉菜单

    本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 &lt;&#37;@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;&#37; String path = request.getContextPath()...

    ASP三级联动下拉菜单

    ASP三级联动下拉菜单是指在ASP编程中实现三级联动的下拉菜单,通过调用数据库数据来实现三级分类的联动效果。这种技术广泛应用于各种Web应用程序中,例如电商平台、在线论坛等。 在这个例子中,我们可以看到,三级...

    php代码实现二级联动下拉菜单效果

    在网页设计中,二级联动下拉菜单是一种常见的交互元素,常用于分类选择或者地区筛选等场景。这种功能的实现通常涉及到前端和后端的交互,其中PHP作为后端语言,负责处理数据并返回给前端。本篇文章将详细介绍如何...

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单

    jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动下拉菜单 jquery省市区三级联动下拉菜单_select三级联动...

    二级联动下拉菜单实例

    在网页设计和开发中,二级联动下拉菜单是一种常见的交互元素,主要用于实现多级选择功能。这种菜单在用户界面设计中扮演着重要角色,尤其是在数据分类复杂或需要用户精确选择某一范围时。以下是对二级联动下拉菜单...

    jQuery+ASP+SQL实现二级联动下拉菜单

    jQuery+ASP+SQL实现二级联动下拉菜单 全国省市数据库可以从网上Down个合适的导入一下就可以了. /**************************** * Author:蓝客密探 * Blog:www.lanke.me * Forum:www.phpdn.cn 详细介绍页面:...

    html+js实现地区三级联动下拉菜单

    在网页设计中,有时我们需要创建一个能够展示地区层级关系的交互式组件,这就是所谓的“地区三级联动下拉菜单”。这个组件通常由三个下拉菜单组成,分别代表省份、城市和区县,用户在选择上一级时,下一级的选项会...

    二级联动下拉菜单插件作菜单用好

    在实际应用中,实现二级联动下拉菜单通常涉及以下几个步骤: 1. **HTML结构**:构建基础的HTML结构,包括一级菜单和二级菜单项。通常使用`&lt;ul&gt;`和`&lt;li&gt;`标签来组织菜单,而`&lt;a&gt;`标签则作为可点击的链接。 2. **CSS...

    excel二级联动下拉菜单怎么做

    通过以上步骤,你可以在Excel中创建一个灵活、交互式的二级联动下拉菜单,它可以根据用户在一级菜单中的选择动态更新二级菜单的内容。这个功能特别适用于需要处理大量具有层级关系数据的场景,如地区分类、产品分类...

    Excel二级联动下拉菜单

    在Excel中,二级联动下拉菜单是一种非常实用的数据录入和管理工具,尤其适用于有层级关系的数据,例如地区划分、产品分类等。它可以帮助用户在选择一级选项后,自动过滤出与之相关的二级选项,提高数据输入的准确性...

    Access数据库-二级下拉菜单制作

    Access数据库-二级下拉菜单制作

    基于Ajax的三级联动下拉菜单.rar

    基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar

    VS2005+AjaxPro实现的无刷新三级联动下拉菜单

    【标题】"VS2005+AjaxPro实现的无刷新三级联动下拉菜单" 描述了一种在ASP.NET开发环境中,使用Visual Studio 2005(VS2005)结合AjaxPro库创建的交互式用户界面技术。这个技术主要用于提升网页应用的用户体验,通过...

    省市县(区)三级联动下拉菜单(内含省市县(区)access、sqlsever数据库)

    在前端,三级联动下拉菜单通常通过JavaScript来实现,利用事件监听和DOM操作。当用户在一级下拉菜单(如省份)中选择一个选项时,二级下拉菜单(如城市)会根据省份的选择动态加载对应的城市数据。同理,选择城市后...

    Access联动下拉列表

    Access中窗体实现二级联动下拉示范,用VBA配合SQL查询来做rowsource,实现二级下拉跟着一级内容变化,如果一级内容没有选择,二级显示所有

    纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果

    本示例主要展示了如何使用纯JSP和Direct Web Remoting (DWR)技术来构建一个功能丰富的用户界面,其中包括三级联动下拉选择菜单、无刷新联动、用户存在性判断以及模拟Google搜索效果的功能。DWR是一种JavaScript库,...

    HTML二级联动下拉列表框的实现,如选择 省,市.zip

    HTML二级联动下拉列表框是一种常见的网页交互设计,它允许用户在两个或多个下拉菜单之间建立关联,以便根据用户在第一个下拉框中的选择动态更新第二个下拉框的内容。这种设计常见于区域选择,例如选择省份后,城市...

    全国省市区三级联动下拉菜单

    全国省市区三级联动下拉菜单是一种常见的前端交互设计,它在网页或应用程序中用于选择地址时,用户可以依次从省、市、区三个级别的下拉菜单中选择,以实现快速定位。这种设计常见于电子商务、物流配送、信息录入等多...

    Select2实现全国省市区三级联动下拉菜单

    在网页开发中,为了提供用户友好的交互体验,经常需要实现一些动态的、有层次的数据选择功能,例如省市区三级联动下拉菜单。在这种场景下,`Select2` 库是一个非常优秀的工具,它能够帮助开发者创建功能强大、易于...

Global site tag (gtag.js) - Google Analytics