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中的屬性名稱

總結

以上是生活随笔為你收集整理的Thymeleaf select 使用 和多select 级联选择的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。