dropdownlist

一 JS实现

   年月日

< HTML >
     < HEAD >
         < title > 年月日三联动下拉框 </ title >
         < meta  http-equiv ='Content-Type'  content ='text/html;  charset =gb2312' >
         < meta  name ='author'  content ='http://singlepine.cnblogs.com/' >
     </ HEAD >
     < body >
         < form  name ="form1" >
             < select  name ="YYYY"  onchange ="YYYYDD(this.value)" >
                 < option  value =""  selected > 请选择 年 </ option >
             </ select >
             < select  name ="MM"  onchange ="MMDD(this.value)" >
                 < option  value =""  selected > 选择 月 </ option >
             </ select >
             < select  name ="DD" >
                 < option  value =""  selected > 选择 日 </ option >
             </ select >
         </ form >
         < script  language ="JavaScript" > <!--
            function YYYYMMDDstart()
            {
                MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

                //先给年下拉框赋内容
                var y   = new Date().getFullYear();
                for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年
                    document.form1.YYYY.options.add(new Option(" "+ i +" 年", i));

                //赋月份的下拉框
                for (var i = 1; i < 13; i++)
                    document.form1.MM.options.add(new Option(" " + i + " 月", i));

                document.form1.YYYY.value = y;
                document.form1.MM.value = new Date().getMonth() + 1;
                var n = MonHead[new Date().getMonth()];
                if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
                    writeDay(n); //赋日期下拉框
                document.form1.DD.value = new Date().getDate();
            }
            if(document.attachEvent)
                window.attachEvent("onload", YYYYMMDDstart);
            else
                window.addEventListener('load', YYYYMMDDstart, false);
            function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
            {
                var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
                if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
                var n = MonHead[MMvalue - 1];
                if (MMvalue ==2 && IsPinYear(str)) n++;
                    writeDay(n)
            }
            function MMDD(str)  //月发生变化时日期联动
            {
                var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
                if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
                var n = MonHead[str - 1];
                if (str ==2 && IsPinYear(YYYYvalue)) n++;
                    writeDay(n)
            }
            function writeDay(n)  //据条件写日期的下拉框
            {
                var e = document.form1.DD; optionsClear(e);
                for (var i=1; i<(n+1); i++)
                    e.options.add(new Option(" "+ i + " 日", i));
            }
            function IsPinYear(year)//判断是否闰平年
            {  
                return(0 == year%4 && (year%100 !=0 || year%400 == 0));
            }
            function optionsClear(e)
            {
                e.options.length = 1;
            }
    //-->
     </ script >
     </ body >
</ HTML >

国家,省/州,城市下拉框

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 下拉框测试 </ title >
</ head >
< script  src ="change_region.js" ></ script >
< form  name ="form1"  method ="post" >
< body >
  < table >
   < tr >
    < td > 国家 </ td >
    < td  width ="140"  class ="SELECT" >< select  name ="country"  id ="country"   onChange ="change_region( 
       window.document.form1.state , 
       window.document.form1.country.options[selectedIndex].value );" >
       
     < option  value ="Not set" > -- 所有国家 -- </ option >
      < script  language ="javascript" >
        set_select_options( window.document.form1.country, country, "" ) ;
      </ script >
              </ select >
             </ td >   
         </ tr >
   < tr >
    < td > 州/省 </ td >
     < td  class ="SELECT" >   < div  align ="left" >  
                     < select  name ="state"  onChange ="change_region( 
        window.document.form1.city , 
        window.document.form1.state.options[selectedIndex].value );" >
                       < option  value ="Not set" > -- 所有州/省-- </ option >
                      </ select >
                   </ div >
               </ td >   
          </ tr >
          < tr >
           < td > 城市 </ td >
           < td >
            < select  name ="city"  id ="city"   >
             < option  value ="Not set" > -- 城市 -- </ option >
                 </ select >
             </ td >
          </ tr >
          < tr >
           < td > 年龄 </ td >
           < td >
     < select  name ='age'  size ='1' >
       < option  value ="0" > -- 都可以 -- </ option >
      < script  language ="javascript" >
        set_select_options( window.document.form1.age, age, "" ) ;
      </ script >     
     </ select >          
    </ td >
          </ tr >
          < tr >
           < td > 身高 </ td >
           < td >
           < select  name ='height'  size ='1' >
     < option  value ="0" > -- 都可以 -- </ option >
      < script  language ="javascript" >
        set_select_options( window.document.form1.height, height, "" ) ;
      </ script >  
     </ select >
           </ td >
          </ tr >
   < tr >
           < td > 体重 </ td >
           < td >
            < select  name ='weight'  size ='1' >
      < option  value ="0" > -- 都可以 -- </ option >
      < script  language ="javascript" >
        set_select_options( window.document.form1.weight, weight, "" ) ;
      </ script >
     </ select >
           </ td >
          </ tr >
   < tr >
           < td > 学位 </ td >
           < td >
            < select  name ="degree"  id ="degree" >
                       < option  value ="Not set"  selected > -- 都可以 -- </ option >
                       < script  language ="javascript" >
       set_select_options( window.document.form1.degree , degree , "" ) ;
        </ script >
              </ select >
           </ td >
          </ tr >
   < tr >
           < td > 职业 </ td >
           < td >
           < select  name ="occupation"  id ="occupation" >
                 < option  value ="Not set"  selected > -- 职业 -- </ option >
                  < script  language ="javascript" >
       set_select_options( window.document.form1.occupation, occupation, "" ) ;
      </ script >
             </ select >
           </ td >
          </ tr >
          < tr >
           < td > 交友目的 </ td >
           < td >
           < select  id =purpose  name =purpose >
                 < option   value ="Not set"  selected > 都可以 </ option >
      < script  language ="javascript" >
       set_select_options( window.document.form1.purpose, purpose, "" ) ;
      </ script >
    </ select >
           </ td >
          </ tr >
          < tr >
           < td > 生肖 </ td >
           < td >
           < select  name ="sheng_xiao"  id ="sheng_xiao" >
                      < option  value ="Not set" > 不详 </ option >
      < script  language ="javascript" >
      set_select_options( window.document.form1.sheng_xiao , sheng_xiao , "" ) ;
      </ script >
             </ select >
           </ td >
          </ tr >
           < tr >
           < td > 星座 </ td >
           < td >
           < select  name ="astrology"  id ="astrology" >
                 < option  value ="Not set"  selected > 不详 </ option >
     < script  language ="javascript" >
     set_select_options( window.document.form1.astrology , astrology , "" ) ;
     </ script >
             </ select >
           </ td >
          </ tr >

    < tr >
           < td > 血型 </ td >
           < td >
           < select  name ="blood_type"  id ="blood_type" >
                 < option  value ="Not set"  selected > 不详 </ option >
      < script  language ="javascript" >
      set_select_options( window.document.form1.blood_type , blood_type , "" ) ;
      </ script >
             </ select >
           </ td >
          </ tr >

    < tr >
           < td > 相貌 </ td >
           < td >
           < select  name ="appearance"  id ="appearance" >
                     < option  value ="Not set"  selected > 以后再告诉你 </ option >
       < script  language ="javascript" >
       set_select_options( window.document.form1.appearance , appearance , "" ) ;
       </ script >
             </ select >
           </ td >
          </ tr >

    < tr >
           < td > 年收入 </ td >
           < td >
           < select  name ="income"  id ="income" >
                  < option  value ="Not set"  selected > 以后再告诉你 </ option >
      < script  language ="javascript" >
      set_select_options( window.document.form1.income , income , "" ) ;
      </ script >
             </ select >
           </ td >
          </ tr >    
  </ table >
</ body >
</ form >
</ html >

html源代码下载/Files/singlepine/country.rar
c＃源代码下载/Files/singlepine/WebApplication3.rar

这种错误一般都是编码格式引起的
处理方法：分别打开你的js和aspx文件，然后菜单file-->Advanced Save Options-->选择Unicode (UTF-8 with signature)-Codepage 65001,然后确定，保存就可以了

posted on 2005-10-29 23:23 小山 阅读(438) 评论(11)   编辑  收藏 收藏至365Key 所属分类: DropDownList

# re: 国家,省/州,城市下拉框 2005-12-29 15:16 jason_18

Feedback

不错啊！！！！！！！！！
永远支持楼主，多多发表一些技术性文章！！！！！！！！！！
   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-29 16:53 jason_18

在ASP.NET好像不可以啊！！
但是在静态的可以，是不是还要再引用什么，还是加什么语句呢？？
总是提示错误:缺少")"，而且下面已经定义的变量，它也没说定义！！！！！！
用静态的直接就可以了，我测试了很久都不行，是不是在ASP.NET不行呢？
望楼主看到消息，能给个回复？？？？？？？？   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-29 17:49 小山

参考上面的“错误脚本处理”   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-30 08:40 jason_18

按照您代码错误处理的方法，把它改作像您那样的话，它运行的时候不会提示有错误，但它什么也没显示了，查看代码，中文都变成了乱码，听说ASP.NET，和一些静态的用法不一样，会不会那些用法不一样导致的呢？
您能不能也做个ASP.NET的，把它里面代码一些该改的给改一下，那后再上传一下，好吗？   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-30 08:54 jason_18

在Dreamweaver MX 调试运行的时候，是可以出来，但在.NET环境下，它就一直提示缺少缺少")"，和一些定义的变量，而且在调试的，代码都没变，而且都是在IE上调试，然道在.NET中还有什么特别限制吗？
什么原因会导致一个行，一个不行呢？
希望楼主能给我解释一下？   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-30 08:56 小山

<globalization
requestEncoding="utf-8"
responseEncoding="utf-8"
/>
<httpHandlers>   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-30 09:49 jason_18

像这样的话，它就会提示:
分析器错误信息: 行“98”上的“httpHandlers”开始标记与文件“file:///c:/inetpub/wwwroot/城市下拉/web.config”中的结束标记“system.web”不匹配。 行 99，位置 4。

源错误:


行 97： />
行 98： <httpHandlers>
行 99： </system.web>
行 100：
行 101：</configuration>
还是要加在什么地方呢？？？？？？？？？？

   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-30 11:05 jason_18

小山老师，能不能您用ASP.NET做一下，也上传上来呢？
后缀让它是.aspx，不是HTML！而且在.NET环境中可以运行出效果来呢？
一直想弄清楚，浪费了快一天时间呢？
有时间的话，能不能做个上传上来呢？   回复
  

#  re: 国家,省/州,城市下拉框 2005-12-30 13:17 小山

已提供，其实把html代码copy到aspx页面中，然后js文件和aspx文件都按照上面的错误处理方法处理，就ok了。   回复
  

二 xmlhttp实现

1.html代码

< HTML >
     < HEAD >
         < title > XmlHttp实现无刷新三联动下拉框 </ 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  MS_POSITIONING ="GridLayout" >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < INPUT  style ="Z-INDEX: 102; LEFT: 448px; WIDTH: 56px; POSITION: absolute; TOP: 80px; HEIGHT: 24px"
                onclick ="getData();"  type ="button"  value ="保存"  id ="Button1"  name ="Button1"  runat ="server" >
             < asp:TextBox  id ="TextBox1"  style ="Z-INDEX: 101; LEFT: 16px; POSITION: absolute; TOP: 80px"  runat ="server"
                Width ="424px" ></ asp:TextBox >
             < asp:DropDownList  id ="DropDownList2"  runat ="server"  style ="Z-INDEX: 103; LEFT: 176px; POSITION: absolute; TOP: 120px" ></ asp:DropDownList >
             < asp:DropDownList  id ="DropDownList1"  runat ="server"  style ="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 120px" ></ asp:DropDownList >
             < asp:DropDownList  id ="DropDownList3"  runat ="server"  style ="Z-INDEX: 105; LEFT: 296px; POSITION: absolute; TOP: 120px" ></ asp:DropDownList >< INPUT  style ="Z-INDEX: 106; LEFT: 8px; WIDTH: 160px; POSITION: absolute; TOP: 176px; HEIGHT: 22px"
                type ="hidden"  size ="21"  id ="hidprovince"  runat ="server" >< INPUT  style ="Z-INDEX: 107; LEFT: 184px; POSITION: absolute; TOP: 176px"  type ="hidden"
                id ="hidcity"  runat ="server" >< INPUT  style ="Z-INDEX: 108; LEFT: 360px; POSITION: absolute; TOP: 176px"  type ="hidden"
                id ="hidarea"  runat ="server" >
             < SCRIPT  LANGUAGE ="JavaScript" >
            <!--
                //以XML求取DropDownList2的数据
                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("DropDownList2").length=0;
　　　　                var piArray = result.split(",");
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                {
　　　　　　                var ary1 = piArray[i].toString().split("|");
　　　　　　                document.all("DropDownList2").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　                }
　　                }
　　                else
　　                {
　　　　                alert(result);
　　                }
                }
                //以XML求取DropDownList3的数据
                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("DropDownList3").length=0;
　　　　                var piArray = result.split(",");
　　　　                for(var i=0;i<piArray.length;i++)
　　　　                {
　　　　　　                var ary1 = piArray[i].toString().split("|");
　　　　　　                document.all("DropDownList3").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　                }
　　                }
　　                else
　　                {
　　　　                alert(result);
　　                }
                }
                function getData()
                {
                    var province=document.getElementById("DropDownList1");
                    var pindex = province.selectedIndex;
                    var pValue = province.options[pindex].value;
                    var pText  = province.options[pindex].text;
                    
                    var city=document.getElementById("DropDownList2");
                    var cindex = city.selectedIndex;
                    var cValue = city.options[cindex].value;
                    var cText  = city.options[cindex].text;
                    
                    var area=document.getElementById("DropDownList3");
                    var aindex = area.selectedIndex;
                    var aValue = area.options[aindex].value;
                    var aText  = area.options[aindex].text;
                    
                    var txt=document.getElementById("TextBox1");                                

                    document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
                    document.Form1.hidprovince.value=pValue;
                    document.Form1.hidcity.value=cValue;
                    document.Form1.hidarea.value=aValue;
                }
            //-->
             </ SCRIPT >
         </ form >
     </ body >
</ HTML >

2.cs代码

public   class  WebForm1 : System.Web.UI.Page
     {
        protected System.Web.UI.WebControls.DropDownList DropDownList1;
        protected System.Web.UI.WebControls.DropDownList DropDownList2;
        protected System.Web.UI.WebControls.DropDownList DropDownList3;
        protected System.Web.UI.WebControls.TextBox TextBox1;
        protected System.Web.UI.HtmlControls.HtmlInputHidden hidarea;
        protected System.Web.UI.HtmlControls.HtmlInputHidden hidcity;
        protected System.Web.UI.HtmlControls.HtmlInputHidden hidprovince;
        protected System.Web.UI.HtmlControls.HtmlInputButton Button1;
    
        public static string ConnectionString=System.Configuration .ConfigurationSettings .AppSettings["ConnectionString"];
    
        GetDataSet#region GetDataSet
        public static DataSet GetDataSet(string sql)
        {
            SqlDataAdapter    sda =new SqlDataAdapter(sql,ConnectionString);
            DataSet ds=new DataSet();
            sda.Fill(ds);
            return ds;
        }
        #endregion

        property#region property
        private string povinceid
        {
            get
            {
                if(ViewState["povinceid"]!=null && ViewState["povinceid"].ToString()!="")
                {
                    return ViewState["povinceid"].ToString();
                }
                else
                {
                    if(Request["povinceid"]!=null && Request["povinceid"].ToString()!="")
                    {
                        return Request["povinceid"];
                    }
                    else
                    {
                        return "";
                    }
                }
            }
            set
            {
                ViewState["povinceid"]=value;
            }
        }
        private string cityid
        {
            get
            {
                if(ViewState["cityid"]!=null && ViewState["cityid"].ToString()!="")
                {
                    return ViewState["cityid"].ToString();
                }
                else
                {
                    if(Request["cityid"]!=null && Request["cityid"].ToString()!="")
                    {
                        return Request["cityid"];
                    }
                    else
                    {
                        return "";
                    }
                }
            }
            set
            {
                ViewState["povinceid"]=value;
            }
        }
        #endregion

        Page_Load#region Page_Load
        private void Page_Load(object sender, System.EventArgs e)
        {
            if(!this.IsPostBack)
　　        {
　　　　        this.down1_bind();
                this.DropDownList1.Attributes.Add("onchange","XmlPost2(this);");
                this.DropDownList2.Attributes.Add("onchange","XmlPost3(this);");
　　        }
　　        if(povinceid != "")
　　        {
　　　　        this.down2_bind(povinceid);
　　        }
            if(cityid != "")
　　        {
　　　　        this.down3_bind(cityid);
　　        }
        }
        
        #endregion

        down2_bind#region down2_bind
        private void down2_bind(string id)
        {
　　        string mystr = "";
　　        string sql = "select cityID,city from city where father = '" + id + "'";
　　        DataSet ds = GetDataSet(sql);

　　        if(ds.Tables[0].Rows.Count != 0)
　　        {
　　　　        for(int i=0;i<ds.Tables[0].Rows.Count;i++)
　　　　        {
　　　　　　        mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();
　　　　        }
　　　　        mystr = mystr.Substring(1);
　　        }
　　        this.Response.Write(mystr);
　　        this.Response.End();
        }
        #endregion

        down3_bind#region down3_bind
        private void down3_bind(string id)
        {
　　        string mystr = "";
　　        string sql = "select areaID,area from area where father = '" + id + "'";
　　        DataSet ds = GetDataSet(sql);

　　        if(ds.Tables[0].Rows.Count != 0)
　　        {
　　　　        for(int i=0;i<ds.Tables[0].Rows.Count;i++)
　　　　        {
　　　　　　        mystr += "," + ds.Tables[0].Rows[i][0].ToString() + "|" + ds.Tables[0].Rows[i][1].ToString();
　　　　        }
　　　　        mystr = mystr.Substring(1);
　　        }
　　        this.Response.Write(mystr);
　　        this.Response.End();
        }

        #endregion
        
        down1_bind#region down1_bind
        private void down1_bind()
        {
　　        string sql = "select provinceID,province from povince";
　　        DataSet ds = GetDataSet(sql);
　　        this.DropDownList1.DataSource = ds;
　　        this.DropDownList1.DataValueField = "provinceID";
　　        this.DropDownList1.DataTextField = "province";
　　        this.DropDownList1.DataBind();　　        
        }

        #endregion

        Web Form Designer generated code#region Web Form Designer generated code
        override protected void OnInit(EventArgs e)
        {
            //
            // CODEGEN: This call is required by the ASP.NET Web Form Designer.
            //
            InitializeComponent();
            base.OnInit(e);
        }

        /**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {    
            this.Button1.ServerClick += new System.EventHandler(this.Button1_ServerClick);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion        

        private void Button1_ServerClick(object sender, System.EventArgs e)
        {
            string sql="insert into testgrid (province,city,area) ";
            sql+="values('"+this.hidprovince.Value+"','"+this.hidcity.Value+"','"+this.hidarea.Value+"')";
            Response.Write(sql);
        }
    }

3.数据库/Files/singlepine/area.rar
4."Ajax实现无刷新三联动下拉框"http://singlepine.cnblogs.com/articles/257954.html

5.源代码下载/Files/singlepine/XmlHttpselect.rar

三 xmlhttp调用webservices

使用微软提供的webservice.htc实现通过JavaScript调用WebService.
1.首先从微软网站上下载webservice.htc,我附件源代码也包含，不下载也可以
http://msdn.microsoft.com/workshop/author/webservice/webservice.htc
2.在网页BODY中添加一个DIV，实现对webservice.htc的引用5.建立测试页面

< HTML >
     < HEAD >
         < title > jsWebServices </ 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" >
        <!--            
            var str_province;
            var str_city;
            var str_area;

            function window_onload() 
            {
                service.useService("/Service1.asmx?WSDL","myselect");
                str_province=service.myselect.callService(province_Result,"getProvince");
            }

            function province_Result(result)
            {                
                if(!result.error)
　　            {　　                
　　　　            document.all("select_province").length=0;　　　　            
　　　　            if(result.value.substring(0,1)==",")
                        result.value =result.value.substring(1,result.length);
　　　　            var piArray = result.value.split(',');
　　　　            for(var i=0;i<piArray.length;i++)
　　　　            {
　　　　　　            var ary1 = piArray[i].toString().split('|');
　　　　　　            document.all("select_province").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　            }　　　　            
　　            }
            }

            function province_onchange() 
            {
                var province=document.getElementById("select_province");
                var pindex = province.selectedIndex;
                var pValue = province.options[pindex].value;
                var pText  = province.options[pindex].text;
                str_city=service.myselect.callService(city_Result,"getCity",pValue);
            }

            function city_onchange() 
            {
                var city=document.getElementById("select_city");
                var cindex = city.selectedIndex;
                var cValue = city.options[cindex].value;
                var cText  = city.options[cindex].text;
                str_area=service.myselect.callService(area_Result,"getArea",cValue);
            }

            function city_Result(result)
            {
                if(!result.error)
　　            {
　　　　            document.all("select_city").length=0;
　　　　            if(result.value.substring(0,1)==",")
                        result.value =result.value.substring(1,result.length);
　　　　            var piArray = result.value.split(",");
　　　　            for(var i=0;i<piArray.length;i++)
　　　　            {
　　　　　　            var ary1 = piArray[i].toString().split("|");
　　　　　　            document.all("select_city").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　            }
　　            }
            }

            function area_Result(result)
            {
                if(!result.error)
　　            {
　　　　            document.all("select_area").length=0;
　　　　            if(result.value.substring(0,1)==",")
                        result.value =result.value.substring(1,result.length);
　　　　            var piArray = result.value.split(",");
　　　　            for(var i=0;i<piArray.length;i++)
　　　　            {
　　　　　　            var ary1 = piArray[i].toString().split("|");
　　　　　　            document.all("select_area").options.add(new Option(ary1[1].toString(),ary1[0].toString()));
　　　　            }
　　            }
            }
            //-->
         </ script >
     </ HEAD >
     < body  MS_POSITIONING ="GridLayout"  onload ="return window_onload()" >
         < div  id ="service"  style ="BEHAVIOR:url(webservice.htc)" ></ div >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < SELECT  id ="select_province"  onchange ="province_onchange();"  style ="Z-INDEX: 101; LEFT: 8px; WIDTH: 128px; POSITION: absolute; TOP: 16px" >
                 < OPTION  selected ></ OPTION >
             </ SELECT >< SELECT  id ="select_city"  onchange ="city_onchange();"  style ="Z-INDEX: 102; LEFT: 160px; WIDTH: 128px; POSITION: absolute; TOP: 16px" >
                 < OPTION  selected ></ OPTION >
             </ SELECT >< SELECT  id ="select_area"  style ="Z-INDEX: 103; LEFT: 304px; WIDTH: 128px; POSITION: absolute; TOP: 16px" >
                 < OPTION  selected ></ OPTION >
             </ SELECT >
         </ form >
     </ body >
</ HTML >

6.引用webservicers
7.数据库脚本

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].[province] ' )  and   OBJECTPROPERTY (id, N ' IsUserTable ' )  =   1 )
drop   table   [ dbo ] . [ province ]
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

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 ] . [ province ]  (
     [ 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

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

8.下载真实数据 /Files/singlepine/area.rar
9.源代码下载 /Files/singlepine/jsWebServices.rar

<div id="service" style="BEHAVIOR:url(webservice.htc)"></div>

3.编写JavaScript，实现对WebService的引用：

function  window_onload() 
             {
                service.useService("/Service1.asmx?WSDL","myselect");
                str_province=service.myselect.callService(province_Result,"getProvince");
            }

useService 语法:
sElementID.useService(sWebServiceURL, sFriendlyName [, oUseOptions] )
useService 参数:

sElementID	Required. The id of the element to which the WebService behavior is attached.
sWebServiceURL	Required. String specifying the URL of the Web Service, using one of the following path types. See the examples section, where several variations of this parameter are shown. Web Service file name A Web service file, which has an .asmx file extension. This short form of the URL is sufficient, provided that the Web service is located in the same folder as the Web page using the WebService behavior. In this case, the ?WSDL query string is assumed by the behavior. WSDL file name A Web Services Description Language (WSDL) file name. The WSDL file must have a .wsdl file extension. Full file path Full path to a WebService (.asmx) or WSDL (.wsdl) file. A file path to a Web Service must include the ?WSDL query string. Either a local file path or a URL can be specified. Relative path A relative path to a WebService (.asmx) or WSDL (.wsdl) file. A file path to a Web Service must include the ?WSDL query string.
sFriendlyName	Required. String representing a friendly name for the Web Service URL.
oUseOptions	Optional. An instance of the useOptions object.

callService语法:
iCallID = sElementID.sFriendlyName.callService( [oCallHandler], fo, oParam )
callService参数:

sElementID	Required. The id of the element to which the WebService behavior is attached.
sFriendlyName	Required. The friendly name for the Web Service, which is defined by calling the useService method.
oCallHandler	Optional. Name of a script callback function that handles the results returned from this instance of the method call.
fo	Required. One of the following possible values. strFuncName A String representing the name of the remote function being called. The String must be bounded by single or double quotation marks. objCall A call object, which has the necessary properties defined to call a remote function.
oParam	Required. One or more comma-delimited parameters, which are passed to the method name specified by fo.

4.建立WebService，代码如下

public class  Service1 : System.Web.Services.WebService
     {
        public static string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
        SqlConnection conn=new SqlConnection(ConnectionString);

        public Service1()
        {
            //CODEGEN: This call is required by the ASP.NET Web Services Designer
            InitializeComponent();
        }

        Component Designer generated code#region Component Designer generated code
        
        //Required by the Web Services Designer 
        private IContainer components = null;
                
        /**//// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
        }

        /**//// <summary>
        /// Clean up any resources being used.
        /// </summary>
        protected override void Dispose( bool disposing )
        {
            if(disposing && components != null)
            {
                components.Dispose();
            }
            base.Dispose(disposing);        
        }
        
        #endregion
        
        getProvince#region getProvince
        [WebMethod(true)]
        public string getProvince()
        {
            string sql="select * from province";
            SqlCommand cmd=new SqlCommand(sql,conn); 

            cmd.Connection.Open();
            SqlDataReader dr=cmd.ExecuteReader();

            string s="";
            while(dr.Read())
            {
                s += "," + dr["provinceID"].ToString() + "|" + dr["province"].ToString();
            }
            return s;
        }

        #endregion

        getCity#region getCity
        [WebMethod(true)]
        public string getCity(string provinceid)
        {
            string str="select * from city where father = '"+provinceid+"'";
            SqlCommand cmd=new SqlCommand(str,conn); 

            cmd.Connection.Open();
            SqlDataReader dr=cmd.ExecuteReader();

            string s="";
            while(dr.Read())
            {
                s += "," + dr["cityID"].ToString() + "|" + dr["city"].ToString();
            }
            return s;
        }

        #endregion

        getArea#region getArea
        [WebMethod(true)]
        public string getArea(string cityid)
        {
            string str="select * from area where father='"+cityid+"'";
            SqlCommand cmd=new SqlCommand(str,conn); 

            cmd.Connection.Open();
            SqlDataReader dr=cmd.ExecuteReader();

            string s="";
            while(dr.Read())
            {
                s += "," + dr["areaID"].ToString() + "|" + dr["area"].ToString();
            }
            return s;
        }
        #endregion
    }

#  re: JavaScript调用Web Services实现无刷新三联动 2005-12-21 19:06 小山

http://singlepine.cnblogs.com/Files/singlepine/area.rar

这里面有真实数据   回复
  

#  re: JavaScript调用Web Services实现无刷新三联动 2005-12-29 12:11 jason_18

太强了，能不能和你多多交流啊！
以后希望有好的文章多多发表！！！！！！！！   回复
  

#  re: JavaScript调用Web Services实现无刷新三联动 2005-12-31 14:28 wapasp

这个在火狐浏览器不支持!

搂住应该 做成支持多种浏览器版本!!   回复
  

#  re: JavaScript调用Web Services实现无刷新三联动 2006-01-12 11:27 asdasd

在测试页面是不是要绑定select_province、select_city、select_area这三个数据呀   回复
  

#  re: JavaScript调用Web Services实现无刷新三联动 2006-01-12 12:40 小山

测试页面后台不用绑定，会在前台通过js来处理   回复
  

DropDownList既能选择又能输入

< html >
< head >
< style >
<!--
.cls1 {}{ position:absolute; left:250px; top:89px; width:216px; height:72px; z-index:1; }
.cls2 {}{ position:absolute; left:250px; top:89px; width:95px; height:18px; z-index:2 }
input {}{ font-size: 12px; padding-top: 2px; padding-left: 2px;width:127;}
//-->
</ style >
</ head >
< script >
<!--
function addOption(pos){

 if(event.keyCode==13)
 {
  var select_obj = document.getElementById("myselect");
  var text_value   = document.getElementById("test").value;

  if (select_obj.length)
  {
   for (var i=0;i<select_obj.length;i++)
   {
    // 如果已经存在，不添加，直接退出
    if (select_obj.options[i].text==text_value)
     alert("选项已存在，请重新输入");
   }
  }
  var the_option= new Option(text_value,text_value);
  
  select_obj.add(the_option);

  select_obj.selectedIndex = select_obj.options.length-1
 }  
 
}
//-->
</ script >
< div  class ="cls1"  style ="clip: rect(3 280 21 110)" >  
   < select  name ="myselect"  style ="width:127"  onchange ="document.getElementById('test').value=this.value" >
< option  value =1 > 1 </ option >
< option  value =2 > 2 </ option >
< option  value =3 > 3 </ option >
   </ select >
</ div >
< div  class ="cls2" >
< input  type ="text"  name ="test"  onkeydown ="addOption()"  size ="20"  style ="width: 127; height: 23" >
</ div >

</ body >
</ html >

posted on 2005-10-15 00:46 小山 阅读(529) 评论(2)   编辑  收藏 收藏至365Key 所属分类: DropDownList

Feedback

按回车后如果输入地数字已经在下拉框中存在，它会弹出提示框说已经存在，但同时也会继续插入相同的数字，希望能够改进。  

回复
  

#  re: DropDownList既能选择又能输入 2006-01-10 17:03 cqcya

// 如果已经存在，不添加，直接退出
if (select_obj.options[i].text==text_value)
{
alert("选项已存在，请重新输入");
return;
}
改为这样就可以了   回复

如何将枚举绑定到DropDownList上

< HTML >
     < HEAD >
         < title > WebForm5 </ title >
         < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
         < meta  content ="C#"  name ="CODE_LANGUAGE" >
         < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
         < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
     </ HEAD >
     < BODY >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < asp:DropDownList  id ="drpStatus"  style ="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 72px"
                runat ="server" ></ 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  Document
{
    /**//// <summary>
    /// Summary description for WebForm5.
    /// </summary>
    public class WebForm5 : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.DropDownList drpStatus;
        private void Page_Load(object sender, System.EventArgs e)
        {
            ListType();
        }
        private void ListType()
        {
            drpStatus.Items.Clear();
            drpStatus.DataSource = ListTypeForEnum();
            drpStatus.DataValueField = "value";
            drpStatus.DataTextField = "text";
            drpStatus.DataBind();
        }
        public static IList ListTypeForEnum()
        {
            ArrayList list = new ArrayList();
            foreach (int i in Enum.GetValues(typeof(EnumActivityType)))
            {
                ListItem listitem = new ListItem(Enum.GetName(typeof(EnumActivityType), i), i.ToString());
                list.Add(listitem);
            }
            return list;
        }
        public enum EnumActivityType
        {
            Task = 1,
            Fax = 2,
            Phone = 3,
            Email = 4,
            Reminder = 5,
            Appointment = 6,
            Expiration = 7,
            Inquiry = 8
        }

        Web 窗体设计器生成的代码#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
    }
}

#  re: DropDownList既能选择又能输入 2005-12-02 10:43 amei