Question

我正在jsf页面上测试组件“SelectOneMenu”。我通过我的ManageBean（将从数据库中获取所有动物）以动态方式填充此组件。

我想知道是否有可能看到用户选择的那个“SelectOneMenu”（组合框）项目，我正在尝试使用value =“＃{animalsManage.animalSelect}”，但它仅在开始时调用这页纸。另外，我正在使用inputText来查看“SelectOneMenu”所选内容的值。

我做错了什么？

JSF：

    <body>
    <ui:component>
        <h:form>
                    <h:outputText value="Select one Mets File" />
                    <h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
                        <f:selectItem itemLabel="Select..."  noSelectionOption="true"/>
                        <f:selectItems value="#{animalsManage.allAnimals}" />
                    </h:selectOneMenu>
                    <h:inputText id="textbox" value="#{animalsManage.animalSelected }" />
        </h:form>
    </ui:component>
</body>

ManageBean：

    @ManagedBean
    @ViewScoped
    public class AnimalsManage implements Serializable {

    @EJB
    private AnimalsFacadeREST animalsFacadeREST;
    private String animalSelected;
    private List< SelectItem> selectAnimals;

    public List<SelectItem> getAllAnimals() {
            List<Animals> al = animalsFacadeREST.findAll();
            selectAnimals = new ArrayList< SelectItem>();
            int i = 0;
            for (Animals animal: al) {
                selectAnimals.add(new SelectItem(i, animal.getName()));
                i++;
            }
            return selectAnimals;
    }

    public String getAnimalSelected() {
       return animalSelected;
    }

    public void setAnimalSelected(String animalSelected) {
        this.animalSelected = animalSelected;
    }
}

Answer 1

针对所提出的问题有许多解决方案。我在这里提出两个基本想法。

服务器端解决方案。只需在<f:ajax>内附加<h:selectOneMenu>标记即可更新所选值并重新呈现用户的选择，例如

<h:selectOneMenu id="combo" value="#{animalsManage.animalSelected}">
    <f:selectItem itemLabel="Select..."  noSelectionOption="true"/>
    <f:selectItems value="#{animalsManage.allAnimals}" />
    <f:ajax execute="combo" render="textbox" />
</h:selectOneMenu>
<h:inputText id="textbox" value="#{animalsManage.animalSelected }" />

如果您愿意，您还可以通过指定listener="#{animalsManage.performCustomAjaxLogic}"标记的<f:ajax>来对ajax侦听器中的所选元素执行一些自定义逻辑。

客户端解决方案。只需在基本更改事件中更新id =“textbox”的元素。所以，如果你使用jQuery，解决方案将是
```
$('#combo').change(function() {
    $('#textbox').val($('#combo').val());
});
```
认为客户端解决方案只会绑定输入组件的文本值。

获取SelectOneMenu的选定值

1 个答案: