如何在javascript中获取primefaces selectOneMenu组件答案

【问题标题】：how to get primefaces selectOneMenu component in javascript如何在javascript中获取primefaces selectOneMenu组件
【发布时间】：2013-10-30 07:00:57
【问题描述】：

我查找了这样的 primefaces 组件；

<p:selectOneMenu id="selectOneMenuProjects"
    value="#{operationMessageBean.selectedModel.operationMessageProject}">
<f:selectItems id="selectItemProjects"
    value="#{selectItemBean.operationMessageProjectItemsAsObject}" />
</p:selectOneMenu>

我想像这样在我的 javascript 方法中获取“selectItems”组件；

<script type="text/javascript">
  function getComponent() {
     var nodeName = document
       .getElementById('selectItemProjects').nodeName;
  }
</script>

但 document.getElementById('selectItemProjects').nodeName; 返回 null

我怎样才能得到这个“selectItems”组件？

【问题讨论】：

标签： javascript jsf-2 primefaces

【解决方案1】：

在 JSF 中使用任何组件的 ID 时要小心，有时 ID 名称会与父名称嵌套。例子：表单内的 selectOneMenu(ID=select12) 在页面中呈现时可能具有名称 form:select12_input。

我建议你使用 FireBug 或 Firefox/Chrome Inspector 来观察你的组件的渲染名称。

解决方案：

如果您想根据 selectOneMenu（例如 onchange）的某些操作了解 .nodeName，您可以这样做：

<p:selectOneMenu id="cmbPais" onchange="yourFunction(this); ......

现在在你的 JS 中：

   <script type="text/javascript">
        function yourFunction(a) {
           alert(a.nodeName);
        }
   </script>

如果您只想在任何函数中获取 nodeName，请检查组件的真实名称...下面的代码适用于我，但这取决于您的页面是如何构建的。

<script type="text/javascript">
function test() {
    var nodeName = document
       .getElementById('form:selectOneMenuProjects_input').nodeName;
       alert(nodeName);
}

</script>

【讨论】：

【解决方案2】：

你会使用 jQuery 吗？

如果是，解决方法很简单，你只需要这样写：

jQuery("[id*='selectOneMenuProjects']");

这必须返回组件并且您可以使用它。请注意，我使用了 *= (contains)，因为 JSF 在您输入的 id 之前生成带有自标识符的 id。如果你不能使用 jQuery，我认为是这样的：

var i=0, div;
while(div= document.getElementsByTagName('div')[i++]){
    if(div.id.match(/selectOneMenuProjects/)){

    }
}

或者代替 div，Primefaces 生成的任何 HTML 代码。

希望对你有帮助。

【讨论】：

İ如果有另一种使用javascript的解决方案，那对我来说会更好