我有一个 PrimeFaces 5.1 <p:selectOneMenu>
在 DOM 中生成以下选择:
<select id="WorkSpace:test:selectYear_input"
name="WorkSpace:test:selectYear_input" tabindex="-1">
<option value="" selected="selected">-- Year --</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>
我有一个<p:commandButton>
触发一个 jQuery 函数来处理更改我的 <p:selectOneMenu>
.
<p:commandButton onclick="changeDropDownList();" />
jQuery 函数:
function changeDropDownList()
{
$('[id$=selectYear_input]')[0].selectedIndex = 2;
}
<p:selectOneMenu>
没有更新。这是怎么造成的以及如何解决?
最佳答案
<p:selectOneMenu>
基本上是一个 <div><ul><li>
覆盖<select><option>
这是视觉上隐藏的。对 <select><option>
的任何更改在DOM中没有体现在<div><ul><li>
中。反之亦然。
但是它附加了一堆事件监听器,这些监听器应该反射(reflect)在隐藏的 <select><option>
中。 。一种方法是触发 click
事件于 .ui-selectonemenu-item
对菜单面板感兴趣。
给定
<p:selectOneMenu widgetVar="selectYear">
您可以选择 jQuery 中的第三项,如下所示
PF("selectYear").panel.find(".ui-selectonemenu-item:eq(2)").click();
<小时/>
或者,您也可以通过 <p:ajax>
来完成此操作(在幕后最终使用 jQuery 的 $.ajax()
):
<p:selectOneMenu id="selectYear" value="#{bean.selectYear}">
...
</p:selectOneMenu>
...
<p:commandButton ...>
<p:ajax listener="#{bean.setSelectYear(2014)}" update="selectYear" />
</p:commandButton>
这只是一个小往返。
关于jquery - 更改 p :selectOneMenu using jQuery 的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29657946/