Primefaces两个selectOneMenu，在选择第一个后，第二个折叠

Question

我在selectOneMenu上遇到问题，用例是： 第一款selectOneMenu用于选择汽车品牌，如宝马，奔驰等。 第二个selectOneMenu用于选择混凝土类型，如果第一个是宝马，那么具体类型就像“320i，520i ......”

这是我的JSF片段：

<p:row>
    <p:column>
        <h:outputLabel for="search_car_brand" value="Brand: " />
    </p:column>
    <p:column>
        <p:selectOneMenu value="#{carController.carSearchDto.brand}"
            converter="brandConverter" effect="fade" id="search_car_brand"
            filter="true" filterMatchMode="startsWith" height="200">
            <f:selectItem itemLabel="Please Select a Brand..." itemValue="" />
            <f:selectItems value="#{constants.availableBrands}"
                var="carBrand" itemLabel="#{carBrand.key}"
                itemValue="#{carBrand.value}" />
            <p:ajax update="search_car_type"
                listener="#{carController.handleSearchBrandChange}" />
        </p:selectOneMenu>
    </p:column>
    <p:column>
        <h:outputLabel for="search_car_type" value="Type: " />
    </p:column>
    <p:column>
        <p:selectOneMenu value="#{carController.carSearchDto.type}"
            converter="typeConverter" effect="fade" id="search_car_type"
            filter="true" filterMatchMode="startsWith" height="200">
            <f:selectItem itemLabel="Please Select a Type..." itemValue="" />
            <f:selectItems
                value="#{carController.activatedCarTypesForSearch}"
                var="carType" itemLabel="#{carType.name}"
                itemValue="#{carType}" />
        </p:selectOneMenu>
        <p:message for="search_car_type" />
    </p:column>
</p:row>

正如PrimeFaces展示的那样，我使用与监听器关联的f：ajax标签，在第一个选择第一个选项时更新第二个selectOneMenu的内容。

听众：

public void handleSearchBrandChange() {
    // retrieve the brand selected from the dto
    if (carSearchDto.getBrand() == null) {
        activatedCarTypesForSearch = null;
        return;
    }

    LOGGER.info(String.format("[Search] Brand Changed to: %s", carSearchDto
            .getBrand().getName()));
    Brand selectedBrand = carSearchDto.getBrand();
    activatedCarTypesForSearch = constants.getAvailableCarTypes().get(
            selectedBrand.getName());
}

这是奇怪的行为：

选择第一个selectOneMenu后，第二个被拼写。以下是此元素的HTML代码：

很明显，这些选项可用，但它们是隐藏的： 我认为<div class="ui-helper-hidden-accessible">很奇怪，它可能阻止选项显示？

这个问题困扰了我两天。针对这类问题的任何解决方案？

提前致谢!!!!

Answer 1

我有同样的问题，通过设置selectOneMenu的css width属性来解决：

<p:selectOneMenu style="width:125px;"...