WEB开发网
开发学院软件开发Java AJAX实现下拉框联动 阅读

AJAX实现下拉框联动

 2009-10-12 00:00:00 来源:WEB开发网   
核心提示:想当年,为了实现三级联动,AJAX实现下拉框联动,找个js高手些了N多代码才搞定,但是很慢,效果图如下:实现代码:a.html<html><body><scriptlanguage="JavaScript">varreq=null;functiontest(){v

想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示。

现在使用AJAX真是太方便了,下面做了个简单例子,实现下拉框的省市联动,效果图如下:

AJAX实现下拉框联动

AJAX实现下拉框联动

实现代码:

a.html

<html>
<body>
<script language="JavaScript">
        var req = null;
        function test() {
                var province = document.all("province").value;
                req = new ActiveXObject("Microsoft.XMLHTTP");
                //设置属性,当后台处理完成后,回来调用myDeal方法。
                req.onreadystatechange = myDeal;
                //发出请求
                req.open("GET", "c.jsp?province=" + province, "false");
                req.send(null);
        }
        function myDeal() {
                if (req.readyState == 4) {
                        //接收服务端返回的数据
                        var ret = req.responseText;
                        //处理数据
                        var obj = document.all("city");
                        for (var i = obj.options.length - 1; i >= 0; i--) {
                                obj.options.remove(i); //从后往前删除
                        }
                        var ops = ret.split("|");
                        for (var i = 0; i < ops.length; i++) {
                                var op = ops[i];
                                var ss = op.split(",");
                                var oOption = document.createElement("OPTION"); //创建一个OPTION节点
                                obj.options.add(oOption);    //将节点加入city选项中
                                oOption.innerText = ss[1];    //设置选择展示的信息
                                oOption.value = ss[0];         //设置选项的值
                        }
                }
        }
</script>
省份:<select id="province" name="province" >
        <option value="hn">河南</option>
        <option value="sx">陕西</option>
</select><br>
城市:<select id="city" name="city">
        <option value="zz">郑州</option>
        <option value="ly">洛阳</option>
</select><br>
</body>
</html>
 
c.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
        String id = request.getParameter("province");
        System.out.println("id="+id);
        if(id !=null&& id.equals("hn")){
                out.println("zz,郑州市|ly,洛阳市");
        }else if(id != null && id.equals("sx")){
                out.println("xa,西安市|xy,咸阳市");
        }
%>

1 2  下一页

Tags:AJAX 实现 下拉

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接