当选择特定的selectOneMenu选项时如何显示inputText？

Question

我想为应用程序创建设置面板。应用程序将把设置值存储到数据库表中。设置面板将用于显示设置并更改值。我希望以以下方式表示这些值：

这样，用户只能输入固定值。我想给用户一个机会输入自定义值。像这样：

我想创建一个带有选项“自定义”的selectOneMenu。当用户选择“自定义”时，selectOneMenu将被替换为inputText字段，他将能够输入自定义值。 “SAVE”按钮将保存数据到数据库中。这是否可以在不刷新页面的情况下实现？也许使用AJAX？

如何实现这个功能？

- Peter Penzov

Answer 1

使用<f:ajax>，当当前选项等于"custom"时，显示<h:inputText>。

<h:selectOneMenu value="#{bean.type}">
    <f:selectItem itemValue="one" itemLabel="Option one" />
    <f:selectItem itemValue="two" itemLabel="Option two" />
    <f:selectItem itemValue="three" itemLabel="Option three" />
    <f:selectItem itemValue="custom" itemLabel="Define custom value" />
    <f:ajax render="input" />
</h:selectOneMenu>
<h:panelGroup id="input">
    <h:inputText value="#{bean.customType}" rendered="#{bean.type == 'custom'}" required="true" />
</h:panelGroup>

- BalusC

---

是的。支持bean代码应该很明显。上面的示例假定有两个String属性type和customType。当然，如果您需要在bean中动态预填充项目，也可以使用<f:selectItems>。有关h:selectOneMenu用法的更多详细信息，请查看标签wiki页面：http://stackoverflow.com/tags/selectonemenu/info - BalusC

你已经拥有它了，否则<f:ajax>就无法工作 :) 只需添加一个<h:commandButton value="提交" action="#{bean.submit}"/>和一个public void submit()方法，在其中完成任务。另请参阅一些不错的JSF2教程的第1章。 - BalusC

您的值绑定有误。它必须绑定到具有getter/setter对的属性，而不是绑定到操作方法，在这种情况下JSF将无法设置提交的值。此外，您还没有将“rendered”属性更改为适当的bean属性。有关正确的值绑定，请参见我在您以前的一个问题上的答案http://stackoverflow.com/questions/9655951/how-to-call-datasource-during-bean-initialization - BalusC

为什么要让最终用户在改变想法时无法更改下拉选项？只需在下拉菜单旁边显示输入即可。 - BalusC

这个问题已经有答案了。当你选择“自定义”时，该字段将出现。当你之后选择另一个选项时，该字段将消失。你自己试过吗？ - BalusC

Answer 2

你可以使用Bootstrap的Select2类：

<h:selectOneMenu styleClass="form-control input-sm select2"
value="#{myBean.data}" id="data">
</h:selectOneMenu>

                        

- Sajid