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

【问题标题】：Displaying data on a website based on selection in a dropdown box根据下拉框中的选择在网站上显示数据
【发布时间】：2012-05-06 21:37:39
【问题描述】：

我有以下问题：

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

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

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

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

我的问题如下：

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

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

我希望你能帮助我！谢谢，迈克尔

【问题讨论】：

这个问题的性质（解决 JSF 2.x 中的一个问题的相对笨拙的尝试只能通过一个附加标签来解决）表明您仍然使用旧的 JSF 1。 X。这是真的吗？
不，我使用的是最新的 JSF 版本。但是，我是 JSF 的新手，因此任何有关如何以完全不同的方式进行操作的提示和技巧都值得赞赏！我唯一的限制是避免使用 ajax。
为什么要避免使用ajax？这正是您的问题的解决方案。
该网站将显示在移动客户端上。由于延迟问题，AJAX 超出了范围。

标签： javascript jsf

【解决方案1】：

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

public String getTypesAsJson() {
    return typesAsJson;
}

与

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

或在视图中通过迭代 Java 集合（如 List<Type>）并相应地打印 JavaScript 代码（如果保证值不包含 JS 中的任何特殊字符，例如引号和换行符）：

<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 将 Java bean 集合转换为有效 JSON 格式的字符串。

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

现在，如果你确定下拉列表的item值是类型标题，那么你可以得到相关的描述如下

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

与

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

【讨论】：