javascript - 根据下拉框中的选择在网站上显示数据

Question

我有以下问题:

在我的数据模型中，我有一个名为 Type 的类。 类型 由标题和描述组成。

现在我有一个下拉框，用户可以在其中选择类型的实例:

<h:selectOneMenu id="typeDropdown" onchange="displayDescription();">
      <f:selectItems value="#{operationCreator.types.title}" />
</h:selectOneMenu>

下拉框下方是一个 div 区域，我希望在其中显示所选类型的描述。

我的问题如下:

如何在 javascript 中存储 Type 实例的描述？一个遍历列表的简单 JSF 标记就可以完成这项工作，但不幸的是我不知道有一个。它们都打印额外的 HTML 标签(如数据表)，或仅与周围的 JSF 标签一起工作(如 selectItems)。

我知道我可以使用 AJAX 推送解决我的问题，但我不想这样做。我想在 javascript 中访问页面加载时的数据。

希望你能帮帮我!谢谢，迈克尔

Answer 1

准备JSON格式的数据，让JSF把它打印成一个JS变量。您可以或者直接在支持 bean 中执行此操作

public String getTypesAsJson() {
    return typesAsJson;
}

与

<script>
    var types = #{bean.typesAsJson};
</script>

或在 View 中迭代 Java 集合，如 List<Type>如果保证值不包含 JS 中的任何特殊字符，例如引号和换行符，则相应地打印 JavaScript 代码:

<script>
    var types = {
        <ui:repeat value="#{bean.types}" var="type" varStatus="loop">
            "#{type.title}": "#{type.description}"#{!loop.last ? "," : ""}
        </ui:repeat>
    };
</script>

第一种方法更可取，因为当类型标题或描述包含 JS 特殊字符时，它消除了生成的 JS 代码中出现语法错误的风险。您可以使用 Google Gson将 Bean 的 Java 集合转换为有效 JSON 格式的字符串。

typesAsJson = new Gson().toJson(types);

现在，如果你确定下拉列表的item值是type title，那么你可以得到关联的描述如下

<h:selectOneMenu ... onchange="displayDescription(this)">

与

function displayDescription(dropdown) {
    var title = dropdown.options[dropdown.selectedIndex].value;
    var description = types[title];
    // ...
}