Primefaces 两个selectOneMenu，选中第一个后，第二个折叠了答案

【问题标题】：Primefaces Two selectOneMenu, after selecting the first one, the second collapsedPrimefaces 两个selectOneMenu，选中第一个后，第二个折叠了
【发布时间】：2013-09-04 13:48:02
【问题描述】：

我在 selectOneMenu 上有问题，用例是：第一个 selectOneMenu 用于选择汽车品牌，如 BMW、Benz 等。第二个selectOneMenu用于选择具体类型，如果第一个是BMW，那么具体类型类似于“320i，520i..”

这是我的 JSF 的 sn-p：

<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">很奇怪，它可能会阻止选项显示？

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

提前谢谢！！！！

【问题讨论】：

我不喜欢你必须建立无选择选项的方式。有一种 JSF 标准方法可以做到这一点：<f:selectItem itemValue="---" noSelectionOption="true" />。除此之外，我总是为我的菜单设置一个宽度：style="width:200px"，你可以试试。你用的是哪个PF？

标签： jquery jsf jsf-2 primefaces

【解决方案1】：

我遇到了同样的问题，通过设置 selectOneMenu 的 css width 属性解决了：

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

【讨论】：