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);
}

显示效果：


[img]http://dl2.iteye.com/upload/attachment/0127/2883/e96bb528-c129-317e-82cb-3c0657fac69e.png[/img]

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+"");
}
}
})
});
}）

效果：


[img]http://dl2.iteye.com/upload/attachment/0127/2885/df154967-057d-364e-bbfe-5f81d9b33f00.png[/img]


radio 使用：

运输方式：
陆运
海运

[color=red]transportType：为pojo中的属性名称[/color]