jquery、java前后台交互实现select⼆级联动
在表单的开发过程中，有时会需要实现select的⼆动，如果涉及到⼤型的系统项⽬，select的选项会存储在后台数据库当中，这就需要前后端交互来获取持久化数据并展⽰，本⽂详细介绍使⽤jquery和java来实现select标签的⼆级联动。
⾸先设计前端select控件。我们在设计数据库表时，为每个具体类别设置了ID和⽗ID，每个option标签中data-id的值就是每个具体类别的ID。
1<select class="select" id="productCplb1" name="productCplb1" onchange="cplb()"">
2        <option value= "" data-id="0">请选择产品类别(⼀級)</option>
3</select>
4
5<select class="select" id="productCplb2" name="productCplb2">
6          <option value= "" data-id="0">请选择产品类别(⼆級)</option>
7</select>
⾸次刷新页⾯，只获取产品类别（⼀级）的下拉列表，并为其设置onchange事件。当选中某个⼀级产品类别时，异步获取并刷新产品类别（⼆级）的下拉列表。获取select下拉列表不需要重新刷新整个表单页⾯，因此使⽤异步ajax与后台交互。将已选中option的data-id 的值作为⽗ID传给后台，获取该ID下的⼦类别后在下⼀级select标签中展⽰。
1//⾸次刷新页⾯获取⼀级产品类别列表
2function cplbs(){
3        $.ajax({
4            async:false,
5            type:"post",
6            url:"/member/selectionzgx_cplb.jspx",
7            data:{id:1},  //⼀级产品类别的⽗ID
8            success:function(data){
9              $("#productCplb1").empty();
10          $("#productCplb1").append("<option value= '' data-id='0'>请选择产品类别(⼀級)</option>")
11          for(var i=0;i<data.length;i++){
12            $("#productCplb1").append("<option value='"+data[i]ame+"' data-id='"+data[i].id+"'>"+data[i]ame+"</option>");
13          }
14            }
15            })
16          }
17
18//选中⼀级产品类别后，获取并刷新⼆级产品类别列表
19function cplb(){
20              var options=$("#productCplb1 option:selected");
21              var value=options.data("id");
22              $.ajax({
23          async:false,
24          type:"post",
25          url:"/member/selectionzgx_cplb.jspx",
26          data:{id:value}, //⼆级产品类别的⽗ID
27          success:function(data){
28            $("#productCplb2").empty();
jquery框架使用29            $("#productCplb2").append("<option value= '' data-id='0'>请选择产品类别(⼆級)</option>")
30            for(var i=0;i<data.length;i++){
31            $("#productCplb2").append("<option value='"+data[i]ame+"' data-id='"+data[i].id+"'>"+data[i]ame+"</option>");
32            }
33          }
34          })
35        }
在后台为ajax请求设置查询函数。由于使⽤SpringMVC+Hibernate框架，数据库表和实体类之间的映射配置以及dao层、service层的编写在此省略，有兴趣的同学可以查看我之前有关数据增删改查思路的简易梳理，在此只展⽰controller层的查询响应函数。查询到结果后，使⽤json字符串返回。
1/**
2  * 产品类别⼆级联动，返回上⼀级下的⼦分类
3  * @param id
4  * @param request
5  * @param response
6  * @param model
7  * @throws JSONException
8  */
9 @RequestMapping(value="/member/selectionzgx_cplb.jspx", method=RequestMethod.POST)
10 public String cplb(Integer id, HttpServletRequest request, HttpServletResponse response,
11  ModelMap model) throws JSONException {
12  Integer pageNo=null;
13        //给定⽗ID，获取下⼀级⼦分类
14  Pagination PrizeByParentId(id, cpn(pageNo), 200);
15  List<CmsPrize> list=(List<CmsPrize>) List();
16  JSONArray array=new JSONArray();
17  for(CmsPrize prize:list) {
18  JSONObject obj=new JSONObject();
19  obj.put("id", Id());
20  obj.put("cname",Cname());
21  array.put(obj);
22  }
23  String();
24 }
⾄此，通过实现了select标签的⼆级联动。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。