asp.net实现DropDownList、ListBox无刷新三级联动(javascript)

转载 2007年09月19日 23:39:00
 此为DropDownList无刷新三级联动的另一种方法,使用javascript操作,因是在客户端操作,所以切换速度较快,但如果数据量大时,加载时会稍慢点,下一篇文章我会发布针对此方法的改进方案,供大家参考。此为DropDownList示例,ListBox只需略加修改。

数据库为国家统计局最新的行政区划,自己又加入了香港、台湾、澳门的行政区划,需要的朋友可直接下载使用。
数据库下载
/Files/netshuai/area.rar

aspx页面代码
   
<% =strAreaData %>
 
<script language = "JavaScript" type="text/javascript">

    function changearea1()
    {
    document.all(
"<% =Ddl_AreaTwo.ClientID %>").length = 0
    document.all(
"<% =Ddl_AreaTwo.ClientID %>").options[0= new Option('选择城市','0');
    document.all(
"<% =Ddl_AreaThree.ClientID %>").length = 0
    document.all(
"<% =Ddl_AreaThree.ClientID %>").options[0= new Option('选择城市','0');
    var oneid
=document.all("<% =Ddl_AreaOne.ClientID %>").value;
    var i;
    
for (i=0;i < onecount; i++)
        {
            
if (subcat[i][1== oneid)
            { 
                document.all(
"<% =Ddl_AreaTwo.ClientID %>").options[document.all("<% =Ddl_AreaTwo.ClientID %>").length] = new Option(subcat[i][0], subcat[i][2]);
            }        
        }
        
    }
    
        function changearea2()
    {
    document.all(
"<% =Ddl_AreaThree.ClientID %>").length = 0
    document.all(
"<% =Ddl_AreaThree.ClientID %>").options[0= new Option('选择城市','0');
    var twoid
=document.all("<% =Ddl_AreaTwo.ClientID %>").value;
    var oneid
=document.all("<% =Ddl_AreaOne.ClientID %>").value;
    var i;
    
for (i=0;i < onecount1; i++)
        {
            
if (subcat1[i][2== twoid)
            { 
                
if (subcat1[i][1== oneid)
                {
                    document.all(
"<% =Ddl_AreaThree.ClientID %>").options[document.all("<% =Ddl_AreaThree.ClientID %>").length] = new Option(subcat1[i][0], subcat1[i][3]);
                }        
            }
        }
    }      
    
    
</script>                
                    
<asp:DropDownList ID="Ddl_AreaOne" runat="server"  AppendDataBoundItems="True">
                        
<asp:ListItem Value="0">请选择</asp:ListItem>
                    
</asp:DropDownList>
                    
<asp:DropDownList ID="Ddl_AreaTwo" runat="server" >
                        
<asp:ListItem Value="0">请选择</asp:ListItem>
                    
</asp:DropDownList>
                    
<asp:DropDownList ID="Ddl_AreaThree" runat="server" >
                        
<asp:ListItem Value="0">请选择</asp:ListItem>
                    
</asp:DropDownList>

cs页面代码
protected string strAreaData;
    
protected void Page_Load(object sender, EventArgs e)
    {
        Ddl_AreaOne.Attributes.Add(
"onchange""changearea1()");
        Ddl_AreaTwo.Attributes.Add(
"onchange""changearea2()");
        
string strSQL;
        strSQL 
= "select * from nts_area where oneid<>0 and twoid=0 and threeid=0 order by sort";
        Ddl_AreaOne.DataSource 
= DataClass.GetDataReader(strSQL);
        Ddl_AreaOne.DataTextField 
= "areaname";
        Ddl_AreaOne.DataValueField 
= "oneid";
        Ddl_AreaOne.DataBind();
        strAreaData 
= "<script language = 'JavaScript' type='text/javascript'>var onecount;onecount=0;subcat = new Array();";
        strSQL 
= "select * from nts_area where oneid<>0 and twoid<>0 and threeid=0 order by sort";
        string ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source='数据库路径'";
        OleDbConnection cnn = new OleDbConnection(ConnectionString);
        cnn.Open();
        OleDbCommand cmd=new OleDbCommand(sql, cnn);
        OleDbDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
        int i1 = 0;
        
while (dr.Read())
        {
            strAreaData 
+= "subcat[" + i1.ToString() + "] = new Array('" + dr["areaname"].ToString() + "','" + dr["oneid"].ToString() + "','" + dr["twoid"].ToString() + "');";
            i1
++;

        }
        strAreaData 
+= "onecount=" + i1.ToString() + ";";

        
//添加三级地区
        strAreaData += "var onecount1;onecount1=0;subcat1 = new Array();";

        strSQL 
= "select * from nts_area where oneid<>0 and twoid<>0 and threeid<>0 order by sort";
        cnn.Open();
        cmd.CommandText = strSQL;
        cmd.Connection = cnn;
        dr 
= cmd.ExecuteReader(CommandBehavior.CloseConnection);
        
int n1 = 0;
        
while (dr.Read())
        {
            strAreaData 
+= "subcat1[" + n1.ToString() + "] = new Array('" + dr["areaname"].ToString() + "','" + dr["oneid"].ToString() + "','" + dr["twoid"].ToString() + "','" + dr["threeid"].ToString() + "');"; n1++;

        }
        dr.Close();
        strAreaData 
+= "onecount1=" + n1.ToString() + ";</script>";
    }

 

http://www.cnblogs.com/netshuai/archive/2007/09/13/892272.html

asp.net js实现dropdownlist二级联动(动态)

ASPX端代码: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/...
  • lishimin1012
  • lishimin1012
  • 2014年06月26日 21:06
  • 3198

【.net基础】--DropDownList控件:两级联动

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等。以前只知道有这样的页面效果,但是对这些控件了解并不多。不怕不知道,就怕不知道。...
  • successA
  • successA
  • 2015年05月11日 16:45
  • 1666

Javascript实现三级联动

三级联动:就是平时网页上需要选择的省市县对应位置的下拉栏模块,当选择好省位置后市的下拉栏更新为已选省的,县类似。 三级联动 ...
  • m0_37460263
  • m0_37460263
  • 2017年07月14日 20:23
  • 582

MVC三级联动无刷新

本篇实现有关客户、订单和产品的无刷新三级联动,先看最终效果:   没有选择时,后2个Select状态为禁用:    当选择第1个Select,第2个Select可供选择,第...
  • shan1774965666
  • shan1774965666
  • 2014年09月03日 09:12
  • 482

ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动

View :     $(document).ready(function() {         GetByJquery();         $("#ddlProvince").chan...
  • shan1774965666
  • shan1774965666
  • 2014年03月12日 11:10
  • 1561

SSM+Maven实现无刷新三级联动

jsp代码: "> $(function() {
  • u014676619
  • u014676619
  • 2016年05月18日 22:29
  • 1138

Ajax局部刷新实现三级联动

达人科技 2017-03-21 08:26 要实现从数据库获取出数据来实现联动,可以使用ajax(Asynchronous javascript and xml (异步的javascript 和...
  • u011277123
  • u011277123
  • 2017年03月24日 11:16
  • 283

ajax+struts2实现三级联动和页面无刷新案例详解

大致实现思想:         1.三级联动表t_data_level主要字段id,parentid,value,name,级联就是通过id与parentid关联查出;         2.页面无...
  • lxhjava
  • lxhjava
  • 2016年12月03日 23:52
  • 1156

YII widget之dropDownList的二级联动与分组

第一建表: CREATE TABLE IF NOT EXISTS `sw_category` ( `id` int(11) NOT NULL auto_increment, `parent_i...
  • slyjit
  • slyjit
  • 2013年12月09日 16:00
  • 1859

中国省市区三级联动实例(AJAX实现)

本文利用ajax实现一个省市区三级联动示例
  • u014313879
  • u014313879
  • 2014年11月09日 18:21
  • 5664
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:asp.net实现DropDownList、ListBox无刷新三级联动(javascript)
举报原因:
原因补充:

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