Javascript 使用Java脚本启用/禁用primefaces的SelectOne菜单

我不熟悉JSF和Primefaces。 我正在构建一个xhtml页面，其中有两个selectonemenu的primefaces。我想根据用户在第一个selectonemenu中选择的值启用或禁用第二个selectonemenu。 对于enable/disable，我在页面中编写了Java脚本，因为我想在客户端这样做，但我不知道如何在primefaces组件中调用Java脚本函数

代码示例

        <h:head>
        <style type="text/css">
    .ui-widget,.ui-widget .ui-widget {
        font-size: 12px !important;
    }
    </style>
        <script>
            function disableOneMenu() {
                alert("In Disable One Menu Function...");
                var clickedGroup = document.getElementById('groupOneMenu').value;
                alert("Selected Value " + clickedGroup);
                if (clickedGroup == "Designation") {
                    document.getElementById('designation').disabled = true;
                    alert("Location One Menu Disabled...");
                } 
            }
        </script>
        <link type="text/css" rel="stylesheet"
            href="#{request.contextPath}/themes/redmond/skin.css" />
    </h:head>
    <h:body>
        <h:form>
            <p:layout fullPage="true">
                <p:layoutUnit position="north" size="30"
                    header="HCV : Peer Group Analysis" resizable="true">
                </p:layoutUnit>
                <p:layoutUnit id="contentLayout" position="west" size="200">
                    <h:panelGrid columns="2">
                        <h:outputText value="Analyse for values of attribute: " />
                        <p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}"
                            style="font-size:18;font-weight:bold;color:blue;width:100">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{userInput.groupAttrList}" />
                            <p:ajax event="valueChange" actionListener="disableOneMenu" />
                        </p:selectOneMenu>
                        <h:outputText value="Designation: " />
                        <p:selectOneMenu id="designatinoOneMenu"
                            value="#{userInput.designation}"
                            style="font-size:18;font-weight:bold;color:blue;width:100">
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItems value="#{userInput.designationList}" />
                        </p:selectOneMenu>
                       </h:panelGrid>
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>
</html>

.ui小部件、.ui小部件.ui小部件{
字体大小：12px！重要；
}
函数disableOneMenu（）{
警报（“禁用一个菜单功能…”）；
var clickedGroup=document.getElementById（'groupOneMenu'）.value；
警报（“选定值”+单击组）；
如果（单击组==“指定”）{
document.getElementById（'designation'）。disabled=true；
警报（“位置一菜单已禁用…”）；
} 
}

请帮助，我可以在xhtml页面中使用java脚本吗

---

谢谢。

您可以使用

的

禁用属性来执行相同的操作。您不需要使用java脚本

<h:body>
    <h:form>
        <h:outputText value="#{test.visible}"/>
        <h:selectOneMenu valueChangeListener="#{test.valuChangeHandler}" onchange="submit()" immediate="true">
            <f:selectItems value="#{test.opList}"/>
        </h:selectOneMenu>
       <h:selectOneMenu disabled="#{!test.visible}">
            <f:selectItems value="#{test.testList}"/>
       </h:selectOneMenu>
    </h:form>
</h:body>

看看这是否有用
 PrimeFaces组件的JavaScript API大部分都有文档记录。DOM变量上有
disable（）
和
enable（）
方法

您需要使用
widgetVar
属性指定此变量的名称：

<p:selectOneMenu id="myMenu" widgetVar="myMenuWidget" ... />

widgetVar
必须与ID不同！IE对ids和全局JS变量使用相同的名称空间（与FireFox相反）。
试试看

<script>
  function disableOneMenu() {

    PF('designatinoOneMenuWV').disabled();
  }
</script>

<p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}" 
      style="font-size:18;font-weight:bold;color:blue;width:100" onchange="disableOneMenu()">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.groupAttrList}" />
</p:selectOneMenu>

<p:selectOneMenu id="designatinoOneMenu" widgetVar="designatinoOneMenuWV"
      value="#{userInput.designation}" style="font-size:18;font-weight:bold;color:blue;width:100">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.designationList}" />
</p:selectOneMenu>


函数disableOneMenu（）{
PF（'designanonemenuwv'）.disabled（）；
}
您尝试了
谢谢。它可以工作..但是我的java脚本函数有问题吗？因为当我更改firstselectmenu的值时，第一个警报框会弹出..但是它不会弹出第二个警报框，也不会禁用第二个selectonemenu..变量
visible
设置为false，当您从第一个下拉菜单中选择特定选项时，它将启用第二个下拉菜单。否则，第二个从一开始就保持禁用状态。现在使用这项技术，你可以做你想做的事了。：）嘿..它起作用了..非常感谢..但我想用素面来做。使用faces标签（）可以正常工作，但不能使用primefaces标签（）…primefaces的selectonemenu有问题吗？？我使用的@Abhay:可能这篇示例文章有帮助：
myMenuWidget.disable();

<script>
  function disableOneMenu() {

    PF('designatinoOneMenuWV').disabled();
  }
</script>

<p:selectOneMenu id="groupOneMenu" value="#{userInput.groupAttr}" 
      style="font-size:18;font-weight:bold;color:blue;width:100" onchange="disableOneMenu()">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.groupAttrList}" />
</p:selectOneMenu>

<p:selectOneMenu id="designatinoOneMenu" widgetVar="designatinoOneMenuWV"
      value="#{userInput.designation}" style="font-size:18;font-weight:bold;color:blue;width:100">
  <f:selectItem itemLabel="Select One" itemValue="" />
  <f:selectItems value="#{userInput.designationList}" />
</p:selectOneMenu>