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>

春天+胸腺TH：ATTR附加html标签

1 个答案: