春天+百里香叶.TH:ATTR 附加 html 标签

Question

我的初始HTML代码如下所示：

<select name="environmentSelect" id="environment" data-show-content="true" class="form-control">
option>Environment</option>
<option value="1"
data-content="Test <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>"></option>
<option value="2"
data-content="Dev <span class='text-muted'>OFFLINE</span><i class='fas fa-power-off text-danger'></i>"></option>
<option value="3"
data-content="Prod <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>"></option>
</select>

环境名称取自数据库。所以我想用 th：attr 填充它们

<select name="environmentSelect" id="environment" data-show-content="true"
class="form-control">
<option>Environment</option>
<option th:each="env : ${environments}" th:value="${env.name}"
th:attr="data-content=${env.name} + '&lt;span class='text-muted'>ONLINE&lt;/span&gt;&lt;i class='fas fa-power-off text-success'&gt;&lt;/i&gt;'"
th:text="${env.name}"
></option>
</select>

问题是，当我在 chrome 中打开开发人员控制台时，我看到值和数据内容，但该选项保持为空。 你能告诉我，是否有可能在 th：attr 中添加 html 标签，如果是，如何

谢谢！

Answer 1

我建议不要在 Thymleaf 模式中构建如此复杂的字符串。最好在DTO类中为其介绍特殊的吸气剂

public class Environment {
// .....
public getDataContent() {
return HtmlUtils.htmlEscape(this.name + " <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>", "UTF-8");
}
// .....
}

和模板

<select name="environmentSelect" id="environment" data-show-content="true"
class="form-control">
<option>Environment</option>
<option th:each="env : ${environments}" th:value="${env.name}"
th:attr="data-content=${env.dataContent}"
th:text="${env.name}"
></option>