jquery - 更改 p :selectOneMenu using jQuery 的项目

Question

我有一个 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>没有更新。这是怎么造成的以及如何解决？

Answer 1

<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>

这只是一个小往返。