Thymeleaf select 使用 和多select 级联选择

阅读更多

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

页面：
状态：

--请选择--




后台controller:
modelAndView.addObject("inqList",InquiryConst.inqList);
InquiryConst 类中订单inqList

public static final List inqList = new ArrayList();
    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);
    }

显示效果：




2.动态实现select 级联：

发货地


-选择省-



-选择市-


-选择区-




后台controller:

List 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(""+ data[i].value+"");
                           }
                       }
   })
});

                $("#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(""+ data[i].value+"");
                            }
                        }
                    })
                });
}）

效果：





radio 使用：

运输方式：
陆运
海运

transportType：为pojo中的属性名称

• 
• 大小: 6.8 KB

• 
• 大小: 9.3 KB

• 查看图片附件