从另一个下拉列表中选择值时显示带有值的下拉框答案

【问题标题】：Show drop down box with values when select value from another dropdown从另一个下拉列表中选择值时显示带有值的下拉框
【发布时间】：2016-04-03 07:22:16
【问题描述】：

从页面中已有的另一个下拉框中选择值时，我需要显示一个新的下拉框。第一个下拉菜单已经在页面中可用，第二个将根据我从 Bean 类获得的布尔值隐藏。

问题是在我刷新页面之前隐藏的下拉菜单不可见。当我刷新页面时，只有我可以看到隐藏的下拉框。当我从第一个下拉框中取消选择另一个值时，第二个下拉列表应该被隐藏，这也在发生，但我必须刷新页面。

请参阅下面的代码以供参考：

instrumentDetails.xhtml

<!-- First drop down -->
        <h:outputText id="product_Group"
            value="#{msg.instrument_add_edit_product_group}" escape="false" />
        <a4j:region>
            <h:selectOneMenu
                value="#{instrumentBean.instrumentData.productGroupId}"
                valueChangeListener="#{instrumentBean.populateProductTypeByServiceProvider}"
                style="width:140px" styleClass="dropDown">
                <f:selectItem itemValue="0"
                    itemLabel="#{msg['gobal.select.default.label']}" />
                <f:selectItems var="productGroupItem"
                    itemValue="#{productGroupItem.id}"
                    itemLabel="#{productGroupItem.label}"
                    value="#{referenceMaster.productGroupLabelKeyList}" />
                <a4j:ajax event="valueChange"   render="productTypeListInstrument,servList,showServiceId"
                    execute="@this" />
            </h:selectOneMenu>
        </a4j:region>

<!-- Second drop down -->       
<a4j:outputPanel ajaxRendered="true" id ="showServiceId" rendered="#{instrumentBean.showService}">
        <h:outputText id="serviceId" value="#{msg.instrument_add_edit_service}"
            escape="false" />
        <h:selectOneMenu value="#{instrumentBean.instrumentData.service}"
            style="width:140px" styleClass="dropDown" >
            <f:selectItem itemValue="0" itemLabel="Mobile" />
            <f:selectItem itemValue="1" itemLabel="Telephone" />
            <f:selectItem itemValue="2" itemLabel="ISDN BRI" />
        </h:selectOneMenu>
    </a4j:outputPanel>

InstrumentBean.java

private boolean showService;

    public void populateProductTypeByServiceProvider(ValueChangeEvent event) {
        try {
            Integer rowindex = new Integer(event.getNewValue().toString());
            if (!CommonUtil.isBlankInteger(instrumentData
                    .getServiceProviderId())
                    && !CommonUtil.isBlankInteger(rowindex)) {

                int productGroupId = rowindex.intValue();

                List<LabelKeyTO> labelKeyTOList = findProductsByGroupAndServiceProvider(
                        productGroupId, instrumentData.getServiceProviderId());

                Collections.sort(labelKeyTOList);
                this.productTypeDetailList = labelKeyTOList;
                setDefaultDetailsListSerRate();
                defaultServiceTable();

            } else {
                if (CommonUtil.isBlankInteger(instrumentData
                        .getServiceProviderId())) {
                    this.instrumentData.setProductGroupId(0);
                }
                this.instrumentData.setProductTypeId(0);
                setDefaultDetailsListProdSerRate();
                defaultServiceTable();
            }

            if(rowindex == 1){
                showService = true;
            }else if(rowindex == 2){
                showService = true;
            }else{
                showService = false;
            }



        } catch (Exception e) {
            this.instrumentData.setProductTypeId(0);
            setDefaultDetailsListProdSerRate();
            defaultServiceTable();
            String reasonFailure = e.getMessage();
            validationMessage(reasonFailure, reasonFailure, reasonFailure,
                    FacesMessage.SEVERITY_ERROR);
        }
    }

【问题讨论】：

您已经实现了在第一个框中的值更改时重新渲染第二个下拉框的机制 (<a4j:ajax event="valueChange" render="showServiceId" execute="@this" />)。您只需要检查第二个下拉框的父级的渲染条件是否正常工作：rendered="#{instrumentBean.showService}" 可能会修复它。
@VasilLukach.. 亲爱的 Vasil，感谢您的回答。正如您在上面的代码中看到的那样，我已经在第二个下拉菜单中使用了：rendered="#{instrumentBean.showService}"。但它仅在刷新页面后显示。这就是问题所在。请提出相同的建议。
与stackoverflow.com/questions/4932810/… 相关的ValueChangeListener 仅在提交时调用。您需要使用 AJAX 来更改服务器端的值。

标签： jsf jsf-2 richfaces

【解决方案1】：

我已经使用 'listener' 完成了。

我在监听器的第一个下拉列表中添加了代码。请参阅下面的更新代码：

<!-- Product Group -->

<h:outputText id="product_Group"
    value="#{msg.instrument_add_edit_product_group}" escape="false" />
<a4j:region>
    <h:selectOneMenu
        value="#{instrumentBean.instrumentData.productGroupId}"
        valueChangeListener="#{instrumentBean.populateProductTypeByServiceProvider}"
        style="width:140px" styleClass="dropDown" >
        <f:selectItem itemValue="0"
            itemLabel="#{msg['gobal.select.default.label']}" />
        <f:selectItems var="productGroupItem"
            itemValue="#{productGroupItem.id}"
            itemLabel="#{productGroupItem.label}"
            value="#{referenceMaster.productGroupLabelKeyList}" />
        <a4j:ajax event="valueChange"   render="productTypeListInstrument,servList" execute="@this" />
        <a4j:ajax event="change"  listener="#{instrumentBean.onChangeProductGroup}" />
    </h:selectOneMenu>
</a4j:region>

谢谢你们的回答。

【讨论】：