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

显示效果：
在这里插入图片描述
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>"); } } }) }); 
}）

效果：
在这里插入图片描述
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>