博客

多级联动是页面设计总经常要用到的，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\"}]"