在jsf中使用selectonemenu可见inputtext答案

【问题标题】：Visible inputtext using selectonemenu in jsf在jsf中使用selectonemenu可见inputtext
【发布时间】：2014-08-08 10:02:41
【问题描述】：

当用户从 selectOneMenu 中选择“支票”选项时，我希望“可见”银行名称输入文本和支票号码输入文本，否则不可见。

<table border="1" id="invoiceData">
        <tr>
            <td valign="bottom" rowspan="6"><p:outputLabel
                    style="font-weight: bold;" value="Email" /><br /> <p:inputText
                    value="#{invoiceBean.email}" autocomplete="off" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Invoice No" /><br /> <p:inputText
                    value="#{invoiceBean.invoiceNumber}" required="true"
                    label="Invoice Number" requiredMessage="Invoice Number Required" /></td>
            <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                <p:calendar value="#{invoiceBean.date}" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Delivery Note" /><br /> <p:inputText
                    value="#{invoiceBean.deliveryNote}" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Mode Of Payments" /><br /> 
                <p:selectOneMenu id="payments" value="#{invoiceBean.modeOfPayment}">
                    <f:selectItem itemLabel="Cash" itemValue="cash" />
                    <f:selectItem id="cheque" itemLabel="Cheque" itemValue="cheque" />
                </p:selectOneMenu>
                </td>

        </tr>

        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Bank Name" /><br /> <p:inputText
                    value="#{invoiceBean.bankName}" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Cheque Number" /><br /> <p:inputText
                    value="#{invoiceBean.chequeNumber}" /></td>
        </tr>

        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Supplier Ref." /><br /> <p:inputText
                    value="#{invoiceBean.supplierReference}" autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Other References" /><br /> <p:inputText
                    value="#{invoiceBean.otherReference}" autocomplete="off" /></td>
        </tr>

        <tr>


        </tr>
        <tr>

        </tr>
        <tr>
            <td valign="top" rowspan="10"><p:outputLabel
                    style="font-weight: bold;" value="Buyer Address" /><br /> <p:inputTextarea
                    rows="12" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Buyer Name" /><br /> <p:inputText
                    value="#{invoiceBean.buyerName}" autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                <p:calendar /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Dispatch Document No" /><br /> <p:inputText
                    autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;" value="Dated" /><br />
                <p:calendar value="#{invoiceBean.dispatchDocumentDate}" /></td>
        </tr>
        <tr>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Dispatch Through" /><br /> <p:inputText
                    value="#{invoiceBean.dispatchThrough}" autocomplete="off" /></td>
            <td><p:outputLabel style="font-weight: bold;"
                    value="Destination" /><br /> <p:inputText
                    value="#{invoiceBean.destination}" /></td>
        </tr>
        <tr>
            <td colspan="2"><p:outputLabel style="font-weight: bold;"
                    value="Terms Of Delivery" /><br /> <p:inputTextarea
                    value="#{invoiceBean.termsOfdelivery}" cols="43" /></td>
        </tr>
    </table>

当用户选择“支票”选项时，输入文本将可见，否则不可见。

【问题讨论】：

标签： jsf-2

【解决方案1】：

使用SelectOneRedio标签、布局属性和添加panelGroup标签的解决方案

<h:panelGroup id="inputs">
        <table border="1" id="invoiceData">
            <tr>
                <td valign="bottom" rowspan="6"><p:outputLabel
                        style="font-weight: bold;" value="Email" /><br /> <p:inputText
                        value="#{invoiceBean.email}" autocomplete="off" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Invoice No" /><br /> <p:inputText
                        value="#{invoiceBean.invoiceNumber}" required="true"
                        label="Invoice Number" requiredMessage="Invoice Number Required" /></td>
                <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                    <p:calendar value="#{invoiceBean.date}" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Delivery Note" /><br /> <p:inputText
                        value="#{invoiceBean.deliveryNote}" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Mode Of Payments" />
                    <h:selectOneRadio value="#{invoiceBean.modeOfPayment}" layout="pageDirection">
                        <f:selectItem itemLabel="Cash" itemValue="cash" />
                        <f:selectItem itemLabel="Cheque" itemValue="cheque" />
                        <f:ajax render="inputs" />
                    </h:selectOneRadio><br /></td>

            </tr>

            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Bank Name" /><br /> <p:inputText
                        value="#{invoiceBean.bankName}"
                        disabled="#{invoiceBean.modeOfPayment == 'cash'}" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Cheque Number" /><br /> <p:inputText
                        value="#{invoiceBean.chequeNumber}"
                        disabled="#{invoiceBean.modeOfPayment == 'cash'}" /></td>
            </tr>

            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Supplier Ref." /><br /> <p:inputText
                        value="#{invoiceBean.supplierReference}" autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Other References" /><br /> <p:inputText
                        value="#{invoiceBean.otherReference}" autocomplete="off" /></td>
            </tr>

            <tr>


            </tr>
            <tr>

            </tr>
            <tr>
                <td valign="top" rowspan="10"><p:outputLabel
                        style="font-weight: bold;" value="Buyer Address" /><br /> <p:inputTextarea
                        rows="12" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Buyer Name" /><br /> <p:inputText
                        value="#{invoiceBean.buyerName}" autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;" value="Date" /><br />
                    <p:calendar /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Dispatch Document No" /><br /> <p:inputText
                        autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;" value="Dated" /><br />
                    <p:calendar value="#{invoiceBean.dispatchDocumentDate}" /></td>
            </tr>
            <tr>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Dispatch Through" /><br /> <p:inputText
                        value="#{invoiceBean.dispatchThrough}" autocomplete="off" /></td>
                <td><p:outputLabel style="font-weight: bold;"
                        value="Destination" /><br /> <p:inputText
                        value="#{invoiceBean.destination}" /></td>
            </tr>
            <tr>
                <td colspan="2"><p:outputLabel style="font-weight: bold;"
                        value="Terms Of Delivery" /><br /> <p:inputTextarea
                        value="#{invoiceBean.termsOfdelivery}" cols="43" /></td>
            </tr>
        </table>
    </h:panelGroup>

【讨论】：