用thymeleaf用标签给页面select下拉框赋值怎么实现

Posted 2023-04-22

一、

http://itutorial.thymeleaf.org/exercise/12
<select th:field="*paymentMethod" th:remove="all-but-first">
<option th:each="paymentMethod : $paymentMethods"
th:value="$paymentMethod" th:text="$paymentMethod.description">Credit card</option>
<option>Another payment method</option>
<option>Another payment method</option>
</select>
二、
如果你 th:field="*paymentMethod"的paymentMethod对象也是个list对象的话，multiple select也是直接使用就OK了。
但如果paymentMethod是个以,号分隔的字符串的话，则只能自己处理了下，thymeleaf还没找到怎么整呢，我的处理方式如下：

<select multiple="multiple" class="width-40 chosen-select" name="knowledgePointIdSet" data-placeholder="请选择课件分类...">
<option th:each="category:$knowPointList" th:value="$category.id"
th:selected="$#strings.contains(instance.knowledgePointIdSet,category.id)"
th:text="$category.name" >模块名称</option>
</select>
看你想要那个 参考技术A 官方上实现步骤如下：
<select th:field="*paymentMethod" th:remove="all-but-first">
<option th:each="paymentMethod : $paymentMethods"
th:value="$paymentMethod" th:text="$paymentMethod.description">Credit card</option>
<option>Another payment method</option>
<option>Another payment method</option>
</select>
还可以用以下方法实现：

<select multiple="multiple" class="width-50 chosen-select" name="knowledgePointIdSet" data-placeholder="分类名称：">
<option th:each="category:$knowPointList" th:value="$category.id"
th:selected="$#strings.contains(instance.knowledgePointIdSet,category.id)"
th:text="$category.name" >性名：</option>
</select> 参考技术B <div class="form-group">
    <label>年龄</label> <select class="form-control" id="age">
        <option value="1" th:selected="$sex=='1'">男</option>
        <option value="2" th:selected="$sex=='2'">女</option>
    </select></div>

Thymeleaf是XML/Xhtml/HTML5的模板引擎，可以用在Web与非Web应用上。

Thymeleaf提供一种可被浏览器正确显示的、格式良好的模板创建方式，也可以用作静态建模。可以使用它创建经过验证的XML与HTML模板。开发者只需将标签属性添加到模板中即可。这些标签属性会在DOM（文档对象模型）上执行预先制定好的逻辑。可以使用它定义自己的模板属性集合，这样一来就可以计算自定义表达式并使用自定义逻辑。

Thymeleaf的模板也可以用作工作原型，Thymeleaf会在运行期替换掉静态值。

解决react + ant-design中Select下拉框分离随页面滚动问题

这个归根结底大概是ant-design中Select组件没有找到正确的父节点。
很多方法试了并没有成功，最后用下面的方法解决了这个bug。

解决办法：

1、在Select组件标签内添加getPopupContainer属性：

getPopupContainer=triggerNode => (triggerNode.parentElement || document.body) 

2、在的上一层用包裹