IT源码网

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

developer 2021年04月03日 程序员 396 0
<! 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.itym.cn/img/d75c4ac7-76e6-4a6b-b03f-30d6028260e8.pngr>




 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.itym.cn/img/d75c4ac7-76e6-4a6b-b03f-30d6028260e8.pngr>






 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
 
评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!