js動態獲取下拉框的數據（搜索條件之間互相影響）

前提：在開發的過程當中，我們常常會遇到這種問題：某個查詢列表的查詢條件之間互相影響，比如現在有兩個搜索條件（下拉），一個需要顯示小組名稱，另一個是根據這個小組名稱查找到對應的小組內人員。那么該如何實現呢？

原理：我們暫且將這三個下拉列表起名為A,B,C. 他們之間的依賴關系是：B的值隨着A的變化而變化，C的值隨着A,B的變化而變化。我們要做的就是：

1. 進入頁面的時候只為A賦值，將B和C都清空。

2. 每次點擊A的時候就將B和C的下拉框中的內容先清空再給B賦值。

3. 每次點擊B的時候，將C的下拉框中的內容先清空再賦值。

例：業務是每個組織機構都有自己的調查問卷，每個問卷的問題也不同。邏輯是共有三個下拉框，分別是組織機構，問卷名稱，問題選擇。根據這三個查詢條件來查詢數據。

table部分：

<select class="select" id="org_id" name="org_id" onchange="cplb()" style="width:130px;height:25px" required="true" msgName="組織機構">
    <option value= "" data-id="0">請選擇</option>
</select>
<select class="select" id="projectid" name="projectid" onchange="cpl()" style="width:130px;height:25px" required="true" msgName="問卷項目名稱">
    <option value= "" data-id="0">請選擇</option>
</select>
<select class="select" id="questionselect" name="questionselect" style="width:130px;height:25px" required="true" msgName="問題選擇">
    <option value= "" data-id="0">請選擇</option>
</select>

js部分：

//進入頁面初始化組織機構下拉列表
        $(function(){
            var aurl = "<%=webapp%>/Naire_DataQuery/inittenantid.act";
            $.ajax({
                async: false,//是否異步
                cache: false,//是否使用緩存
                type: 'POST',//請求方式：post
                dataType: 'json',//數據傳輸格式：json
                url: aurl,//請求的action路徑
                data: {},
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //請求失敗處理函數
                    alert('獲取用戶信息失敗');
                },
                success: function (data) {
                    var k = JSON.parse(data);
                    $("#org_id").empty();//進入頁面首先清空組織機構的下拉列表內容
                       $("#org_id").append("<option value= '' data-id='0'>請選擇</option>")//為組織結構先添加一個請選擇
                       for(var i=0;i<k.length;i++){//循環從后台查出來的數據,逐條填入組織機構的下拉中。
                           $("#org_id").append("<option value='"+k[i].id+"' data-id='"+k[i].id+"'>"+k[i].cname+"</option>");
                       } 
                }
            });  
        }) 

        //改變組織機構的值 
        function cplb(){
            $("#projectid").empty();//每次修改組織機構的值的時候，清空問卷項目名稱的下拉內容
            $("#projectid").append("<option value= '' data-id='0'>請選擇</option>")
            $("#questionselect").empty();//每次修改組織機構的值的時候，清空問題選擇的下拉內容
            $("#questionselect").append("<option value= '' data-id='0'>請選擇</option>")
            var org_id = $("#org_id").val();
            var aurl = "<%=webapp%>/Naire_DataQuery/changetenantid.act";
            $.ajax({
                async: false,//是否異步
                cache: false,//是否使用緩存
                type: 'POST',//請求方式：post
                dataType: 'json',//數據傳輸格式：json
                url: aurl,//請求的action路徑
                data: {teid:org_id},
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //請求失敗處理函數
                    alert('獲取用戶信息失敗');
                },
                success: function (data) {
                    var k = JSON.parse(data);
                       for(var i=0;i<k.length;i++){
                           $("#projectid").append("<option value='"+k[i].id+"' data-id='"+k[i].id+"'>"+k[i].cname+"</option>");
                       } 
                }
            });  
        }
        
        //改變問卷項目名稱的值 
        function cpl(){
            $("#questionselect").empty();//每次修改問卷項目的名稱,都清空問題選擇的下拉內容。
            $("#questionselect").append("<option value= '' data-id='0'>請選擇</option>")
            var org_id = $("#org_id").val();
            var projectid = $("#projectid").val();
            var aurl = "<%=webapp%>/Naire_DataQuery/changeprojectname.act";
            $.ajax({
                async: false,//是否異步
                cache: false,//是否使用緩存
                type: 'POST',//請求方式：post
                dataType: 'json',//數據傳輸格式：json
                url: aurl,//請求的action路徑
                data: {teid:org_id,projectid:projectid},
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //請求失敗處理函數
                     alert('獲取用戶信息失敗');
                },
                success: function (data) {
                    var k = JSON.parse(data);
                       for(var i=0;i<k.length;i++){
                           $("#questionselect").append("<option value='"+k[i].id+"' data-id='"+k[i].id+"'>"+k[i].cname+"</option>");
                       } 
                }
            });  
        }

后台部分：（這部分根據公司所用框架自行修改，我這個僅供參考）

@ResponseBody
    @RequestMapping("/cus_inittenantid")
    public String cus_inittenantid(HttpServletRequest request) throws Exception {
    
        List list = naire_DataQueryService.getcus_tenantList();//根據自己實際情況查出來list即可。
        JSONArray array = new JSONArray();
        for (int i = 0; i < list.size(); i++) {
            Map map = (Map) list.get(i);
            String id = (String) map.get("id");
            String cname = (String) map.get("cname");
            JSONObject obj = new JSONObject();
            obj.put("id", id);
            obj.put("cname", cname);
            array.put(obj);
        }

        return array.toString();
    }    

@ResponseBody
    @RequestMapping("/changetenantid")
    public String changetenantid(HttpServletRequest request, String teid) throws Exception {
        List list = naire_DataQueryService.getchangeProject(teid);//根據實際情況查出來list格式的即可。
        JSONArray array = new JSONArray();
        for (int i = 0; i < list.size(); i++) {
            Map map = (Map) list.get(i);
            String id = (String) map.get("id");
            String cname = (String) map.get("cname");
            JSONObject obj = new JSONObject();
            obj.put("id", id);
            obj.put("cname", cname);
            array.put(obj);
        }

        return array.toString();
    }

@ResponseBody
    @RequestMapping("/changeprojectname")
    public String changeprojectname(HttpServletRequest request, String teid, String projectid) throws Exception {
        List list = naire_DataQueryService.getchangequestionselect(teid, projectid);//根據自己實際情況查出格式為list即可。
        JSONArray array = new JSONArray();
        for (int i = 0; i < list.size(); i++) {
            Map map = (Map) list.get(i);
            String id = (String) map.get("id");
            String cname = (String) map.get("cname");
            JSONObject obj = new JSONObject();
            obj.put("id", id);
            obj.put("cname", cname);
            array.put(obj);
        }

        return array.toString();
    }

 

 

持續更新！！