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中的属性名称

Thymeleaf select 使用 和多select 级联选择

猜你喜欢

Thymeleaf select 使用和多select 级联选择