js动态获取下拉框的数据（搜索条件之间互相影响）
Posted 夏夜凉凉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动态获取下拉框的数据（搜索条件之间互相影响）相关的知识，希望对你有一定的参考价值。
前提：在开发的过程当中，我们常常会遇到这种问题：某个查询列表的查询条件之间互相影响，比如现在有两个搜索条件（下拉），一个需要显示小组名称，另一个是根据这个小组名称查找到对应的小组内人员。那么该如何实现呢？
原理：我们暂且将这三个下拉列表起名为A,B,C. 他们之间的依赖关系是：B的值随着A的变化而变化，C的值随着A,B的变化而变化。我们要做的就是：
1. 进入页面的时候只为A赋值，将B和C都清空。
2. 每次点击A的时候就将B和C的下拉框中的内容先清空再给B赋值。
3. 每次点击B的时候，将C的下拉框中的内容先清空再赋值。
例：业务是每个组织机构都有自己的调查问卷，每个问卷的问题也不同。逻辑是共有三个下拉框，分别是组织机构，问卷名称，问题选择。根据这三个查询条件来查询数据。
table部分：
1 <select class="select" id="org_id" name="org_id" onchange="cplb()" style="width:130px;height:25px" required="true" msgName="组织机构"> 2 <option value= "" data-id="0">请选择</option> 3 </select> 4 <select class="select" id="projectid" name="projectid" onchange="cpl()" style="width:130px;height:25px" required="true" msgName="问卷项目名称"> 5 <option value= "" data-id="0">请选择</option> 6 </select> 7 <select class="select" id="questionselect" name="questionselect" style="width:130px;height:25px" required="true" msgName="问题选择"> 8 <option value= "" data-id="0">请选择</option> 9 </select>
js部分：
1 //进入页面初始化组织机构下拉列表 2 $(function(){ 3 var aurl = "<%=webapp%>/Naire_DataQuery/inittenantid.act"; 4 $.ajax({ 5 async: false,//是否异步 6 cache: false,//是否使用缓存 7 type: ‘POST‘,//请求方式：post 8 dataType: ‘json‘,//数据传输格式：json 9 url: aurl,//请求的action路径 10 data: {}, 11 error: function (XMLHttpRequest, textStatus, errorThrown) { 12 //请求失败处理函数 13 alert(‘获取用户信息失败‘); 14 }, 15 success: function (data) { 16 var k = JSON.parse(data); 17 $("#org_id").empty();//进入页面首先清空组织机构的下拉列表内容 18 $("#org_id").append("<option value= ‘‘ data-id=‘0‘>请选择</option>")//为组织结构先添加一个请选择 19 for(var i=0;i<k.length;i++){//循环从后台查出来的数据,逐条填入组织机构的下拉中。 20 $("#org_id").append("<option value=‘"+k[i].id+"‘ data-id=‘"+k[i].id+"‘>"+k[i].cname+"</option>"); 21 } 22 } 23 }); 24 }) 25 26 //改变组织机构的值 27 function cplb(){ 28 $("#projectid").empty();//每次修改组织机构的值的时候，清空问卷项目名称的下拉内容 29 $("#projectid").append("<option value= ‘‘ data-id=‘0‘>请选择</option>") 30 $("#questionselect").empty();//每次修改组织机构的值的时候，清空问题选择的下拉内容 31 $("#questionselect").append("<option value= ‘‘ data-id=‘0‘>请选择</option>") 32 var org_id = $("#org_id").val(); 33 var aurl = "<%=webapp%>/Naire_DataQuery/changetenantid.act"; 34 $.ajax({ 35 async: false,//是否异步 36 cache: false,//是否使用缓存 37 type: ‘POST‘,//请求方式：post 38 dataType: ‘json‘,//数据传输格式：json 39 url: aurl,//请求的action路径 40 data: {teid:org_id}, 41 error: function (XMLHttpRequest, textStatus, errorThrown) { 42 //请求失败处理函数 43 alert(‘获取用户信息失败‘); 44 }, 45 success: function (data) { 46 var k = JSON.parse(data); 47 for(var i=0;i<k.length;i++){ 48 $("#projectid").append("<option value=‘"+k[i].id+"‘ data-id=‘"+k[i].id+"‘>"+k[i].cname+"</option>"); 49 } 50 } 51 }); 52 } 53 54 //改变问卷项目名称的值 55 function cpl(){ 56 $("#questionselect").empty();//每次修改问卷项目的名称,都清空问题选择的下拉内容。 57 $("#questionselect").append("<option value= ‘‘ data-id=‘0‘>请选择</option>") 58 var org_id = $("#org_id").val(); 59 var projectid = $("#projectid").val(); 60 var aurl = "<%=webapp%>/Naire_DataQuery/changeprojectname.act"; 61 $.ajax({ 62 async: false,//是否异步 63 cache: false,//是否使用缓存 64 type: ‘POST‘,//请求方式：post 65 dataType: ‘json‘,//数据传输格式：json 66 url: aurl,//请求的action路径 67 data: {teid:org_id,projectid:projectid}, 68 error: function (XMLHttpRequest, textStatus, errorThrown) { 69 //请求失败处理函数 70 alert(‘获取用户信息失败‘); 71 }, 72 success: function (data) { 73 var k = JSON.parse(data); 74 for(var i=0;i<k.length;i++){ 75 $("#questionselect").append("<option value=‘"+k[i].id+"‘ data-id=‘"+k[i].id+"‘>"+k[i].cname+"</option>"); 76 } 77 } 78 }); 79 }
后台部分：（这部分根据公司所用框架自行修改，我这个仅供参考）
1 @ResponseBody 2 @RequestMapping("/cus_inittenantid") 3 public String cus_inittenantid(HttpServletRequest request) throws Exception { 4 5 List list = naire_DataQueryService.getcus_tenantList();//根据自己实际情况查出来list即可。 6 JSONArray array = new JSONArray(); 7 for (int i = 0; i < list.size(); i++) { 8 Map map = (Map) list.get(i); 9 String id = (String) map.get("id"); 10 String cname = (String) map.get("cname"); 11 JSONObject obj = new JSONObject(); 12 obj.put("id", id); 13 obj.put("cname", cname); 14 array.put(obj); 15 } 16 17 return array.toString(); 18 }
1 @ResponseBody 2 @RequestMapping("/changetenantid") 3 public String changetenantid(HttpServletRequest request, String teid) throws Exception { 4 List list = naire_DataQueryService.getchangeProject(teid);//根据实际情况查出来list格式的即可。 5 JSONArray array = new JSONArray(); 6 for (int i = 0; i < list.size(); i++) { 7 Map map = (Map) list.get(i); 8 String id = (String) map.get("id"); 9 String cname = (String) map.get("cname"); 10 JSONObject obj = new JSONObject(); 11 obj.put("id", id); 12 obj.put("cname", cname); 13 array.put(obj); 14 } 15 16 return array.toString(); 17 }
1 @ResponseBody 2 @RequestMapping("/changeprojectname") 3 public String changeprojectname(HttpServletRequest request, String teid, String projectid) throws Exception { 4 List list = naire_DataQueryService.getchangequestionselect(teid, projectid);//根据自己实际情况查出格式为list即可。 5 JSONArray array = new JSONArray(); 6 for (int i = 0; i < list.size(); i++) { 7 Map map = (Map) list.get(i); 8 String id = (String) map.get("id"); 9 String cname = (String) map.get("cname"); 10 JSONObject obj = new JSONObject(); 11 obj.put("id", id); 12 obj.put("cname", cname); 13 array.put(obj); 14 } 15 16 return array.toString(); 17 }
持续更新！！
以上是关于js动态获取下拉框的数据（搜索条件之间互相影响）的主要内容，如果未能解决你的问题，请参考以下文章
JS与Jquery之动态添加下拉框select并级联改变事件