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>
transportType：為pojo中的屬性名稱
