通过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();
        }
    }