javascript - 通过 jQuery 向 PrimeFaces selectOneListbox 添加新的选择值

Question

我需要将文本输入中的值动态添加到列表框字段。基本上，我正在制作一个自定义的多行文本组件。以下适用于标准<h:selectOneListbox>，但是当我使用 PrimeFaces 等效项时<p:selectOneListbox>，似乎什么都没有发生。我在我的应用程序中使用所有 PrimeFaces 输入，并且我希望保持外观一致。

<!--This works:-->

<h:form id="mainForm">
<p:inputText id="txtInput" /><p:commandButton value="Add" id="addTxt" 
onclick="addText()"/>
<h:selectOneListbox id="selectTxt"/>
<script type="text/javascript">
function addText(){
    var txtInput = $('#mainForm\\:txtInput').val();
    var opts = $('#mainForm\\:selectTxt').prop('options');
    opts[opts.length] = new Option(txtInput,txtInput,true,true);
        }
</script>
</h:form>

<!--This doesn't work:-->
<h:form id="mainForm">
<p:inputText id="txtInput" /><p:commandButton value="Add" id="addTxt"     
onclick="addText()"/>
<p:selectOneListbox id="selectTxt"/>
<script type="text/javascript">
    function addText(){
        var txtInput = $('#mainForm\\:txtInput').val();
        var opts = $('#mainForm\\:selectTxt_input').prop('options');
        opts[opts.length] = new Option(txtInput,txtInput,true,true);
        }
    </script>
    </h:form>

在此先感谢您的帮助。

Answer 1

使用<p:selectOneListbox>an<ul><li>而不是<select><option>来呈现选项（原因很简单，那就是有更多的自由来赋予它不同的外观'n'feel）。这正是您不能只创建和添加新Option元素的原因。在浏览器中右键单击页面并执行查看源代码，您会更好地理解它（当然，如果您已经熟悉基本的 HTML）。

请注意，以这种方式添加新选项似乎确实适用于<h:selectOneListbox>，但这纯粹是视觉上的，在客户端。JSF 在提交时不会接受在客户端创建的项目，但会抛出一个Validation Error: Value not valid简单的原因，即提交的值不是服务器端定义的项目的一部分<f:selectItems>。

您需要使用 JSF 而不是 JavaScript 来操作该<f:selectItems>值。这样它也可以工作<p:selectOneListbox>。

这是一个具体的启动示例，如何使用纯 JSF 进行操作：

<h:form>
    <p:inputText value="#{bean.text}" />
    <p:commandButton value="Add" action="#{bean.add}" update="listbox" />
    <p:selectOneListbox id="listbox">
        <f:selectItems value="#{bean.items}" />
    </p:selectOneListbox>
</h:form>

和：

@ManagedBean
@ViewScoped
public class Bean {

    private String text; // +getter+setter
    private List<String> items; // +getter

    @PostConstruct
    public void init() {
        items = new ArrayList<String>();
    }

    public void add() {
        items.add(text);
    }

    // ...
}

就这样。

也可以看看：

• 当 UI 可以由 CSS、HTML、JavaScript、jQuery 实现时，JSF 需要什么？