Thymeleaf select 使用 和多select 级联选择

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

页面：
状态：
<select name="status" th:field="*{status}" id="idstatus" class="input-select" th:value="*{status}">
<option value="">--请选择--</option>
<option th:each="cts,userStat:${inqList}" th:value="${cts.key}" th:text="${cts.value}"></option>

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

显示效果：


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

2.动态实现select 级联：
<tr>
<td>发货地</td>
<td class="ls0">
<select class="area_select notnull" name="startArea1" id="start_select1">
<option value="">-选择省-</option>
<option th:each="area:${listAreas}" th:value="${area.regionCode}" th:text="${area.regionName}" ></option>
</select>
<select class="area_select notnull" name="startArea2" id="start_select2">
<option value="">-选择市-</option>
</select>
<select class="area_select nomr notnull" name="startArea3" id="start_select3">
<option value="">-选择区-</option>
</select>
</td>
</tr>

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

效果：


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


radio 使用：

<li>
<span class="label_span">运输方式：</span>
<input type="radio" name="transportType" th:field="*{transportType}" checked id="land" value="0" /><label for="land" class="mr20">陆运</label>
<input type="radio" name="transportType" th:field="*{transportType}" id="sea" value="1" /><label for="sea" >海运</label>
</li>

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