JSF/PrimeFaces 客户端输入操作答案

【问题标题】：JSF/PrimeFaces client-side input manipulationJSF/PrimeFaces 客户端输入操作
【发布时间】：2012-09-03 18:30:49
【问题描述】：

我有一个 JSF/PrimeFaces 页面，其中 <p:selectOneMenu> 具有从托管 bean 中的值填充的项目。它的项目实际上是用简单语句描述的示例查询，以帮助用户评估系统。

<p:selectOneMenu id="sampleQueryInput">
    <f:selectItems value="#{bean.sampleQueries}" var="sampleQuery" itemLabel="#{sampleQuery.title}" itemValue="#{sampleQuery.query}" />
</p:selectOneMenu>

当用户从<p:selectOneMenu> 中选择示例查询时，我想将选定的sampleQuery.query 插入另一个<p:inputTextarea>。文本区域包含要发送的实际查询，最终用户应该可以编辑。我没有在 PrimeFaces 用户指南中找到有关客户端 API 的足够信息，而且我不知道我应该使用 PF 客户端 API 还是编写自己的 javascript 来处理它。我怎样才能做到这一点？我正在使用 PrimeFaces 3.3.1。

【问题讨论】：

使用纯 JavaScript 获取 textarea 上的选定值。
谢谢。如果无法进行服务器端操作，恐怕我不得不这样做。暂时，我使用在所选查询更改时触发托管 bean 上的方法并将其插入到 textarea 中。
资源在客户端时不需要去服务器。您只需要检查 HTML 生成的代码并查看如何获取所选值。如果这是很多工作，那么请保持 ajax 方式。

标签： javascript jquery jsf primefaces client-side

【解决方案1】：

在你的p:selectOneMenu 的onchange 中尝试这样的事情（编写一个简单的 js 函数并调用它）

var selectedVal = jQuery("[id$='sampleQueryInput']").find("select").val();
jQuery("#IdOfInputTextarea").text(selectedVal);//maybe it should be jQuery("#IdOfInputTextarea").val(selectedVal); , not sure

【讨论】：

【解决方案2】：

使用：

<p:selectOneMenu id="sampleQueryInput" onchange="callJavaScriptFunction()">

在callJavaScriptFunction 中，您可以通过ID 为sampleQueryInput 获取所选项目，并将值放入inputTextarea。

【讨论】：