Ajax实现无刷新三联动下拉框

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

< HTML >

  < HEAd >

     < TITLE > <% = xmmc %> -- <% = wjmc %>

     </ TITLE >

     < script  type ="text/javascript" > ...

            if (window.ActiveXObject && !window.XMLHttpRequest) ...{

                window.XMLHttpRequest=function() ...{

                    return new ActiveXObject((navigator.userAgent.toLowerCase().indexOf('msie 6') != -1) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP');

                };

            }//取得XMLHttpRequest对象

                

            var req;

            var flagSelect;

            function testName(flag,value)//

            ...{

            flagSelect = flag; 

            req=new XMLHttpRequest();

            if (req) 

            ...{

                req.onreadystatechange=setValue;

            }

                req.open('POST',"getLabelValue.do?flag=" flag "&value=" value);

                req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

                req.send(null);

        }

            function setValue()

            ...{

                if (req.readyState==4 )

                ...{                                 

                    if(req.status==200)

                    ...{    

                        

                        if(flagSelect=="1")//假如选择某个省要更新市和区

                        ...{

                            var v=req.responseText.split("||");

                            paint(document.all("shi"),v[0]);

                            paint(document.all("qu"),v[1]);

                        }

                        if(flagSelect=="2")//假如选择某市,只需改变区

                        ...{

                            var v=req.responseText;

                            paint(document.all("qu"),v);

                        }

                    }

                }

            }



            function paint(obj,value)

            ...{

                var ops = obj.options;

                    while(ops.length>0)

                    ...{

                      ops.remove(0);

                    }

                    for(var i=0;i<v.length-1;i  )

                    ...{

                        var o = document.createElement("OPTION");

                        o.value=v[i].split(",")[0];

                        v.text=v[i].split(",")[1];

                        ops.add(o);

                    }

            }

             </ script >





     < body >

     < table >

        < tr >

         < td >

         省 < select  name ="pro"  onchange ="testName(1,this.value);" >

                    < option  value ="1" > 省一 </ option > <!-- 用循环把数据库里的所有省选出来 -->

            </ select >

         </ td >

           < td >

         省 < select  name ="shi"  onchange ="testName(2,this.value);" >

                    < option  value ="11" > 市一 </ option > <!-- 用循环把数据库里的所有省一的市选出来 -->

            </ select >

         </ td >

           < td >

         区 < select  name ="qu" >

                    < option  value ="111" > 区一 </ option > <!-- 用循环把数据库里的所有省一的市一的区选出来 -->

            </ select >

         </ td >

        </ tr >

     </ table >

     </ body >                         

</ HTML >





 写一个actioin

public class GetLabelValueAction extends Action {

    public ActionForward execute(ActionMapping mapping, ActionForm form,

            HttpServletRequest request, HttpServletResponse response) {

        response.setContentType("text/xml; charset=GBK");

        try {

            PrintWriter out = response.getWriter();

            String flag = request.getParameter("flag");

            String value = request.getParameter("value");

            if(flag==null)

            {

                return ;

            }

            StringBuffer values = new StringBuffer("");

           //getconnection;

            //query

            //rs 

            if(flag.equals("1"))

            {

                rs = stmt.executeQuery("select 市编号,城市名称 from city_table where 省编号='" value "' order by 市编号");

                while(rs.next())

                {

                    values.append(rs.getString(1) "," rs.getString(2) ";");

                }

                String ff  = values.substring(0,values.indexOf(",") 1);//最得敢小的市编号

                rs = stmt.executeQuery("select 区编号,区名称 from city_table where 市编号='" ff "' order by 区编号");

                values.append("||");//区分市和区信息.

                while(rs.next())

                {

                    values.append(rs.getString(1) "," rs.getString(2) ";");

                }

            }else if(flag.equals("2"))

            {

               rs = stmt.executeQuery("select 区编号,区名称 from city_table where 市编号='" value "' order by 区编号");

                while(rs.next())

                {

                    values.append(rs.getString(1) "," rs.getString(2) ";");

                } 

            }

            else

            {

            }

            out.println(values.toString());

            out.flush();

            out.close();

        } catch (IOException e) {

            // TODO Auto-generated catch block

            e.printStackTrace();

        }

        return null;

    }

}

Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/





 if(flag.equals("1"))

            {

                rs = stmt.executeQuery("select 市编号,城市名称 from city_table where 省编号='" value "' order by 市编号");

                while(rs.next())

                {

                    values.append(rs.getString(1) "," rs.getString(2) ";");

                }

                String ff  = values.substring(0,values.indexOf(",") 1);//最得敢小的市编号

                rs = stmt.executeQuery("select 区编号,区名称 from [color=#FF0000]area_table[/color] where 市编号='" ff "' order by 区编号");

                values.append("||");//区分市和区信息.

                while(rs.next())

                {

                    values.append(rs.getString(1) "," rs.getString(2) ";");

                }

            }





 www.itzhe.cn 
< 网友回复 > function paint(obj,value) 
{ 
var ops = obj.options; 
while(ops.length> 0) 
{ 
ops.remove(0); 
} 
for(var i=0;i  < v .length-1;i ) 
{ 
var o  = document.createElement(  "OPTION "); 
o.value =v[i].split(  ", ")[0]; 
v.text =v[i].split(  ", ")[1]; 
www.itzhe.cn


ops.add(o); 
} 
} 


o.value =v[i].split(  ", ")[0]; 
v.text =v[i].split(  ", ")[1]; 
在请问以下 上面的v在哪儿定义的
<网友回复 > 不好意思哈 

JScript code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/







 function paint(obj,value)

            {

                 var v = value.split(";");//在这里啦

                 var ops = obj.options;

                    while(ops.length>0)

                    {

                      ops.remove(0);

                    }

                    for(var i=0;i < v .length-1;i  )

                    {

                        var o  = document.createElement("OPTION");

                         o.value =v[i].split(",")[0];

                         v.text =v[i].split(",")[1];

                         ops.add(o);

                    }

            }





本篇文章来源于 www.itzhe.cn 原文链接：http://www.itzhe.cn/html/web/JSP/20071113/18380_2.html