城市三级联动

来源：互联网发布：linux重启网络编辑：程序博客网时间：2024/05/16 16:15

代码通过struts2和json实现的，所以需要导相对应的jar包
html部分

<body>            <select id="sheng">                    <option value="--">请选择</option>                    <option value="hn">河南</option>                    <option value="bj">北京</option>            </select>            <select id="city">                    <option value="--">请选择</option>             </select>            <select id="xian">                    <option value="--">请选择</option>             </select></body>

js部分

  function pp(){                     var s=document.getElementById("city");                    var index=document.getElementById("city").selectedIndex;                    /* alert(s[index].value); */                    return s[index].value;             }            function createAJAX(){                    var ajax=null;                        try{                                ajax = new ActiveXObject("microsoft.xmlhttp");                        }catch(e1){                                ajax = new XMLHttpRequest();                        }                        return ajax;            }             document.getElementById("sheng").onchange=function checkout(){                            var sheng=document.getElementById("sheng").value;                            var ajax=createAJAX();                            var url="${pageContext.request.contextPath}/CheckOut?id="+new Date().getTime();                            var method = "post";                            ajax.open(method,url);                              ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");                            ajax.send("sheng="+sheng);                              //---------------------------------------------------------------                            ajax.onreadystatechange=function(){                                if(ajax.readyState==4){                                    if(ajax.status==200){                                            var cityjson=ajax.responseText;                                            var jsonObject = eval("("+cityjson+")");                                            document.getElementById("city").length=1;                                            for(var i=0;i<jsonObject.length;i++){                                                    var option=document.createElement("option");                                                    option.value=jsonObject[i].key;                                                    option.innerHTML=jsonObject[i].value;                                                    document.getElementById("city").appendChild(option);                                            }                                            if(pp()=="--"){                                                    document.getElementById("xian").length=1;                                            }                                    }                            }                           }             }             //------------------------------------------------------------------------------------------------              document.getElementById("city").onchange=function checkout(){                            var city=document.getElementById("city").value;                            var ajax=createAJAX();                            var url="${pageContext.request.contextPath}/SanJi?id="+new Date().getTime();                            var method = "post";                            ajax.open(method,url);                              ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");                            ajax.send("city="+city);                                //---------------------------------------------------------------                            ajax.onreadystatechange=function(){                                if(ajax.readyState==4){                                    if(ajax.status==200){                                            var cityjson=ajax.responseText;                                            var jsonObject = eval("("+cityjson+")");                                            document.getElementById("xian").length=1;                                            for(var i=0;i<jsonObject.length;i++){                                                    var option=document.createElement("option");                                                    option.value=jsonObject[i].key;                                                    option.innerHTML=jsonObject[i].value;                                                    document.getElementById("xian").appendChild(option);                                            }                                    }                                }                                   }              }

action

public class SanJi extends ActionSupport {    private String city;    private List<Xian> list=new ArrayList<Xian>();            public List<Xian> getList() {        return list;    }    public void setList(List<Xian> list) {        this.list = list;    }            public String getCity() {        return city;    }    public void setCity(String city) {        this.city = city;    }            @Override            public String execute() throws Exception {                if("zz".equals(city)){                    Xian c1=new Xian("zy","中原区");                    Xian c2=new Xian("eq","二七区");                    Xian c3=new Xian("gx","高新区");                    list.add(c1);                    list.add(c2);                    list.add(c3);                }                if("xx".equals(city)){                    Xian c1=new Xian("yy","原阳");                    Xian c2=new Xian("sz","私宅");                    Xian c3=new Xian("db","大宾");                    list.add(c1);                    list.add(c2);                    list.add(c3);                }                JSONArray fromObject = JSONArray.fromObject(list);                String string = fromObject.toString();                HttpServletResponse response = ServletActionContext.getResponse();                response.setContentType("text/html;charset=UTF-8");                PrintWriter writer = response.getWriter();                writer.write(string);                writer.close();                return NONE;            }}

阅读全文

0 0