通過jquery實現動態二級聯動（二級數據從數據庫中獲取）

1、首先來看一下html頁面代碼

<form class="form-inline search-form" id="myform" action="CustomerServlet?method=getAllCustomer" method="post">
                            <div class="btn-group">
                                <select id="field" class="form-control" name="field">
                                    <option value="0">--請選擇篩選條件--</option>
                                    <option value="customer_name">客戶名稱</option>
                                    <option value="customer_industry">所屬行業</option>
                                    <option value="customer_source">客戶來源</option>
                                    <option value="create_time">創建時間</option>
                                </select>

                                <!-- 顯示要輸入的搜索條件 -->
                                <div class="form-group" id="conditionContent">
                                    
                                </div>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-success" id="sobtn">搜索</button>
                            </div>
                        </form>

2、使用jquery的change事件進行動態聯動，這里只展示當option為客戶來源以及所屬行業時的動態聯動，代碼如下：

$("#field").change(function(){
        $("#conditionContent").empty();
        //獲取條件
        var condition=$(this).find("option:checked").val();
        
        if(condition=="customer_name"){
            var $input= $("<input>",{
                type:"text",
                name:"customerName",
                class:"form-control"
            });
            $("#conditionContent").append($input);
        }
        //時間段
        if(condition=="create_time"){
            var $input1= $("<input>",{
                type:"date",
                name:"startTime",
                class:"form-control"
            });
            var $input2= $("<input>",{
                type:"date",
                name:"endTime",
                class:"form-control"
            });
            $("#conditionContent").append($input1).append("----").append($input2);
        }
        //所屬行業
        if(condition=="customer_industry"){
            var data = {

            };
            data.name = condition;
            $.ajax({
                type : 'post',
                url : 'CustomerServlet?method=getSomeCustomer',
                data : data,
                cache : false,
                sync : true,
                success : function(data) {
                   //alert(data);
                    var obj = JSON.parse(data);
                    //alert(obj);
                    var array = obj.data;
                    var $select=$("<select>",{
                        name:"fieldId",
                        class:"form-control"
                    });
                    $.each(array,function(index,ele){
                        //alert(ele.fieldId);
                        var $option=$("<option>",{
                            text:ele.fieldName,
                            value:ele.fieldId
                        });
                        $select.append($option);
                    });
                    $("#conditionContent").append($select);
                } 
            });
        }
        
        //-----------所屬來源
        if(condition=="customer_source"){
            var data = {

            };
            data.name = condition;
            $.ajax({
                type : 'post',
                url : 'CustomerServlet?method=getSomeCustomer',
                data : data,
                cache : false,
                sync : true,
                success : function(data) {
                   //alert(data);
                    var obj = JSON.parse(data);
                    //alert(obj);
                    var array = obj.data;
                    var $select=$("<select>",{
                        name:"sourceId",
                        class:"form-control"
                    });
                    $.each(array,function(index,ele){
                        //alert(ele.sourceId);
                        var $option=$("<option>",{
                            text:ele.sourceName,
                            value:ele.sourceId
                        });
                        $select.append($option);
                    });
                    $("#conditionContent").append($select);
                } 
            });
        }
        
    });

3、當opiton為客戶來源時發送一個ajax到后台，后台獲取相關信息后返回一個List集合，將List用JSonArray和jsonObject進行處理轉化為json字符串格式，返回前台請求，當請求成功后進行$each迭代獲取list里面對象的屬性，后台部分代碼如下：

List<WorkingField> list1 = new ArrayList<WorkingField>();
        JSONObject obj = new JSONObject();
        response.setCharacterEncoding("UTF-8");
        String condition = request.getParameter("name");
        try {
                list2 = customerServiceI.getAllSource();
                JSONArray jsonArray = JSONArray.fromObject(list2);
                jsonArray.toString();
                obj.put("data", jsonArray);
//                System.out.println(jsonArray);
            
        } catch (Exception e) {
            e.printStackTrace();
        }
        try {
            response.getWriter().write(obj.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }