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>

table

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>");
                       } 
                }
            });  
        }

js

后台部分：（这部分根据公司所用框架自行修改，我这个仅供参考）

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

cus_inittenantid

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

changetenantid

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

changeprojectname

持续更新！！