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

Question

我有以下问题:

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

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

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

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

我的问题如下:

如何在javascript中存储Type实例的描述？迭代列表的简单JSF标记可以完成这项工作,但不幸的是我不知道.它们都打印其他HTML标记(如datatable),或仅与周围的JSF标记(如selectItems)一起使用.

我知道我可以使用AJAX推送解决我的问题,但我不想.我想在javascript中访问我的页面加载数据.

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

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

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

现在,如果您确保下拉列表的项目值是类型标题,那么您可以获得如下相关描述

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

同

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