高手莫入--AJAX实现下拉框联动

最新推荐文章于 2021-08-06 11:46:52 发布

weixin_33924770

最新推荐文章于 2021-08-06 11:46:52 发布

阅读量154

点赞数

文章标签： java 数据库 javascript ViewUI

原文链接：https://yq.aliyun.com/articles/408346

版权

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

现在使用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" οnchange= "test();">
        <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,咸阳市");
        }
%>

这个功能挺实用的，选项数据可以从数据库中获取，为了把例子做简单点，就用jsp提供数据。

本文转自 leizhimin 51CTO博客，原文链接：http://blog.51cto.com/lavasoft/204884，如需转载请自行联系原作者