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> 

transportType：为pojo中的属性名称

• 
• 大小: 6.8 KB

•