我需要将文本输入中的值动态添加到列表框字段中。基本上，我正在制作一个自定义的多行文本组件。以下代码适用于标准<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>
先谢谢您的帮助。
最佳答案
<p:selectOneListbox>使用<ul><li>而不是<select><option>来显示选项(原因很简单，那就是拥有更多的自由度来赋予它不同的外观)。这就是为什么您不能仅创建和添加新的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);
}
// ...
}
就这样。
也可以看看: