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>使用 <ul><li>而不是 <select><option>展示选项(原因很简单，这样就有更多的自由来赋予它不同的外观)。这正是您不能只创建和添加新的 Option 的原因。元素。在浏览器中右键单击页面并执行查看源代码，您会更好地理解它(当然，如果您已经熟悉基本的 HTML)。

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

您需要使用 JSF 而不是 JavaScript 来操作 <f:selectItems>值(value)。这样它将在 <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);
    }

    // ...
}

就这些。

另见:

• What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?