Thymeleaf select 使用和多select 级联选择

悠悠 2021-10-15 09:12 1130阅读 0赞

1.使用select 并且回绑数据;

页面：  
状态：

后台controller:

modelAndView.addObject("inqList",InquiryConst.inqList);

InquiryConst 类中订单inqList

public static final List<KeyValue> inqList = new ArrayList<KeyValue>(); 
        static {  
            KeyValue keyValue = new KeyValue("0","询价中"); 
            inqList.add(keyValue); 
            KeyValue keyValue1 = new KeyValue("1","已委托"); 
            inqList.add(keyValue1); 
            KeyValue keyValue2 = new KeyValue("2","已下架"); 
            inqList.add(keyValue2); 
            KeyValue keyValue3 = new KeyValue("3","已失效"); 
            inqList.add(keyValue3); 
            KeyValue keyValue4 = new KeyValue("4","已过期"); 
            inqList.add(keyValue4); 
        }

显示效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]  
2.动态实现select 级联：

后台controller:

List<SystemArea> listAreas = systemAreaService.listAreas(systemArea); 
    
    //地区 
      mav.addObject("listAreas",listAreas);

级联代码实现：

$(document).ready(function(){ 
                    $("#start_select1").change(function(){ 
                       var t = $("#start_select1").val(); 
                       if(t ==''){ 
                           return; 
       } 
    
       $.ajax({ 
       url:'/area/code', 
                           async:false, 
       type:'post', 
       data:{id:t,ranNum:Math.random()}, 
                           success:function(data){ 
                               var t2 = $("#start_select2").empty(); 
    
                               for ( var i = 0; i < data.length; i++) { 
                                   t2.append("<option value='"+data[i].key+"'>"+ data[i].value+"</option>"); 
                               } 
                           } 
       }) 
    }); 
    
                    $("#start_select2").change(function(){ 
                        var t = $("#start_select2").val(); 
                        if(t ==''){ 
                            return; 
                        } 
    
                        $.ajax({ 
                            url:'/area/code', 
                            async:false, 
                            type:'post', 
                            data:{id:t,ranNum:Math.random()}, 
                            success:function(data){ 
                                var t3 = $("#start_select3").empty(); 
                                for ( var i = 0; i < data.length; i++) { 
                                    t3.append("<option value='"+data[i].key+"'>"+ data[i].value+"</option>"); 
                                } 
                            } 
                        }) 
                    }); 
    }）

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 1]  
radio 使用：

transportType：为pojo中的属性名称

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]: /images/20211015/122d03a08bf743fcaf71afe46ca18829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70 1]: /images/20211015/e33e467a34334edb9a8d46ada9e4fbb7.png