[037]ajax实现select二级联动

来源：互联网发布：黄乙玲心事谁人知编辑：程序博客网时间：2024/05/31 19:34

多级联动是页面设计总经常要用到的，select内option选项内容如何动态的从数据库获取又是一个典型应用，利用ajax技术可实现option选项的动态刷新，下面就来一起看看实现代码吧。

一共分为三部分：HTML5、js、服务器端代码，下面就一一列出。

页面显示代码

<div class="search"> <span>请选择分类：</span>             <span>一级分类：</span>             <span>                <select id="firstclassify" name="firstclassify">                   <option>----请选择----</option>               </select>            </span>            <span>二级分类：</span>             <span>                <select id="secondclassify" name="secondclassify">                       <option>----请选择----</option>               </select>            </span>            <span>                <input name="" type="submit" value="提交" style="cursor:pointer;width:100px;height:30px" >            </span>           </div>

#js部分代码

<script type="text/javascript">       function FirstClaAjax(claName, classify){            $.ajax({                type: "post",                data:  "claName=" + claName,                dataType: "json",                url: "/newslabel/AjaxSelect",                async:false,                success: function (data) {                    var str = "";                    $.each(data, function(index,value){   // 解析出data对应的Object数组                          str += "<option>" + value.name + "</option>";                    });                    if ("secondclassify" == classify){                        $("#secondclassify").empty();                        $("#secondclassify").append("<option>----请选择----</option>");                    }                     $("#" + classify).append(str);                },                error: function(json){                      alert("error");                  }              });        }    </script>    <script type="text/javascript">       $(document).ready(function(){          FirstClaAjax("0", "firstclassify");          $("#firstclassify").change(function(){            var val = $("#firstclassify option:selected").text();            if ("----请选择----" != val){                FirstClaAjax(val, "secondclassify");            }          });       });    </script>

服务器端代码

@Override    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("UTF-8");        String claName = request.getParameter("claName");        response.setContentType("text/html; charset=UTF-8");        //String data = "[{\"name\":\"2010324268\"},{\"name\":\"2010324256\"}]";        String data = querryFirstCla(claName);        //System.out.println("data:" + data);        PrintWriter out = response.getWriter();        out.write(data);    }    public static String querryFirstCla(String claName){        String resu = "";        if("0".equals(claName)){            resu = ClassifyServiceImpl.queryFirstCla();        }else {            resu = ClassifyServiceImpl.querySecondClaStr(claName);        }        return resu;    }

返回的数据为json格式，可以拼接字符串实现，也可以调用json类
字符串格式如下：
"[{\"name\":\"2010324268\"},{\"name\":\"2010324256\"}]"

0 0