注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

樱之花

叶散的时候,你明白欢聚;花谢的时候,你明白青春.

 
 
 

日志

 
 
关于我

分类中“我的实验室”是我在日常工作中的一些知识总结,有些写的比较匆忙,可能大家在阅读时会产生困扰,后期有时间我会重新整理编辑,谢谢大家的到访,您们的支持是我前进的动力!

网易考拉推荐

010 VB.NET无刷新的省市县三级联动(JS,Ajax)  

2011-12-09 14:33:02|  分类: 我的实验室 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图:
010 VB.NET无刷新的省市县三级联动(JS,Ajax) - freesky - 樱之花 yinzhihua2008
 
数据表tbl_provall:
表名 tbl_provall
描述 省市县表(全部用中文记录)

字段名 描述 主键 标识 数据类型 长度 精度 小数位数 允许空 默认值
prov 省份     varchar 50 50 0    
city 城市     varchar 100 100 0  
zone1 区/县     varchar 100 100 0  

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

CREATE TABLE [dbo].[tbl_provall] (
 [prov] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
 [city] [varchar] (100) COLLATE Chinese_PRC_CI_AS NULL ,
 [zone1] [varchar] (100) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO

编写查询数据表内容程序
AjaxGet.aspx.vb

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Call ChkUserLogin()

        Dim sql As String
        Dim prov As String = Request("prov_").ToString
        Dim city As String = Request("city_").ToString
        Dim str As String = "_选择"
        Dim dts As New DataTable
        If Request("gettype") = "0" Then   '省份
            sql = "SELECT distinct prov,prov FROM tbl_provall"
            dts = GetDs(sql).Tables(0)
            For i As Integer = 0 To dts.Rows.Count - 1
                str = str & "," & dts.Rows(i).Item("prov").ToString & "_" & dts.Rows(i).Item("prov").ToString
            Next
            dts.Dispose()
        ElseIf Request("gettype") = "1" Then   '城市
            If prov <> "" Then
                sql = "SELECT distinct city,city FROM tbl_provall where prov='" & prov & "' and city is not null"
                dts = GetDs(sql).Tables(0)
                For i As Integer = 0 To dts.Rows.Count - 1
                    str = str & "," & dts.Rows(i).Item("city").ToString & "_" & dts.Rows(i).Item("city").ToString
                Next
                dts.Dispose()
            End If
        ElseIf Request("gettype") = "2" Then   '区县
            If prov <> "" And city <> "" Then
                sql = "SELECT distinct zone1,zone1 FROM tbl_provall where prov='" & prov & "' and city='" & city & "' and zone1 is not null"
                dts = GetDs(sql).Tables(0)
                For i As Integer = 0 To dts.Rows.Count - 1
                    str = str & "," & dts.Rows(i).Item("zone1").ToString & "_" & dts.Rows(i).Item("zone1").ToString
                Next
                dts.Dispose()
            End If
        End If
        Response.Write(str & "____")
    End Sub


Ajax处理程序Test.js

function AjaxGetSearchInfo(sindex)
{
    var searchsec;
    var searchnm;
   
    /*
    0 prov_ 省份
    1 city_ 城市
    2 zone_ 区县
    */
   
    var arr1 = new Array("prov_","city_","zone_");//控件名
    var arr2 = new Array("省份","城市","区县");//中文描述
    var arr3 = new Array(-1,0,1);//依附关系
    var arr4 = new Array([1,2],[1,2],[2]);//下属关系
   
    searchnm = arr1[sindex].toLowerCase();
    searchsec = arr2[sindex];
    var arrindex = arr3[sindex];
  
    var objtar = eval("document.all." + arr1[sindex]);//当前控件
    var frmobj = eval("form1." + arr1[sindex]);     //当前控件
    var obj;
   
    //参数组合成目标查询地址
    var sUrl = "AjaxGet.aspx?gettype=" + sindex + "&";
    for(var i=0;i<arr1.length;i++)
    {
    obj = eval("document.all."+arr1[i]);
    obj.value = obj.value.toUpperCase();
    sUrl = sUrl + arr1[i] + "="+ obj.value +"&"
    }
    sUrl = sUrl +"&timestamp=" + new Date().getTime();
  alert(sUrl)
    var xmlhttp;  
    try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){
          try{
            xmlhttp = new XMLHttpRequest();
          }catch(e){}
        }
    }
    xmlhttp.onreadystatechange =function()
    {
        if(xmlhttp.readyState == 4)
        {
          if(xmlhttp.status==200)
          {
            result = unescape(xmlhttp.responseText);
            if(result.indexOf("____")==-1)
            {                        
             alert("提示:查找"+ searchsec +"失败,远程文件有错误!");
             return;
            }
            else
            {
             //清空OPTIONS,包括下属
                for(var i = 0;i<arr4[sindex].length;i++)
             {
              if(arr4[sindex][i]== -1)
              {
               continue; 
              }                          
              var frmobj2 = eval("form1."+arr1[arr4[sindex][i]]);
                    for(var j=0;j<frmobj2.options.length;)
           {           
               frmobj2.removeChild(frmobj2.options[j]);
           }
             }      
                result= result.replace(/____/g,"");
                strs = result.split(",");
                for(i=0;i<strs.length;i++)
                {
                    strs2 = strs[i].split("_");
                    frmobj.options.add(new Option(strs2[1],strs2[0]));
                }      
            }
          }else{
             alert("提示:查找"+ searchsec +"失败!");
            return;
          }
        }
    }
    xmlhttp.open("get",sUrl);
    xmlhttp.send(null);  
}




Test.aspx
放三个下拉列表控件
<asp:DropDownList ID="prov_" runat="server"></asp:DropDownList>
<asp:DropDownList ID="city_" runat="server"></asp:DropDownList>
<asp:DropDownList ID="zone_" runat="server"></asp:DropDownList>
最后插入JS代码调用
  <script type="text/javascript"  src="Test.js"></script>
  <script>
  AjaxGetSearchInfo(0)//调用省份
  </script>
  评论这张
 
阅读(660)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017