码迷,mamicode.com
首页 > Web开发 > 详细

js动态获取下拉框的数据(搜索条件之间互相影响)

时间:2020-01-12 11:23:22      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:下拉列表   关系   value   opened   src   obj   error:   false   close   

前提:在开发的过程当中,我们常常会遇到这种问题:某个查询列表的查询条件之间互相影响,比如现在有两个搜索条件(下拉),一个需要显示小组名称,另一个是根据这个小组名称查找到对应的小组内人员。那么该如何实现呢?

原理:我们暂且将这三个下拉列表起名为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>
table

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         }
js

后台部分:(这部分根据公司所用框架自行修改,我这个仅供参考)

技术图片
 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     }    
cus_inittenantid
技术图片
 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     }
changetenantid
技术图片
 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     }
changeprojectname

 

 

持续更新!!

js动态获取下拉框的数据(搜索条件之间互相影响)

标签:下拉列表   关系   value   opened   src   obj   error:   false   close   

原文地址:https://www.cnblogs.com/flyinghome/p/12157002.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!