当前位置: 代码迷 >> Java Web开发 >> Ajax实现无刷新三联动下拉框,该如何解决
  详细解决方案

Ajax实现无刷新三联动下拉框,该如何解决

热度:171   发布时间:2016-04-17 12:40:12.0
Ajax实现无刷新三联动下拉框
在struts+jsp下
如 省->市->区
想了好久就是不会写
自己也刚刚学ajax
请高手帮帮忙
谢谢

------解决方案--------------------
Java code
<!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> 写一个actioinpublic 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;    }}
  相关解决方案