使用 jQuery 更改 p:selectOneMenu 的项目

Question

我有一个 PrimeFaces 5.1 <p:selectOneMenu> 在 DOM 中生成以下 select:

<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> 基本上是 <select><option> 之上的 <div><ul><li> 层，在视觉上是隐藏的。 DOM 中对 <select><option> 的任何更改都不会反映在 <div><ul><li> 中。它只会以相反的方式发生。

它有一堆附加的事件侦听器，应该反映在隐藏 <select><option> 中。一种方法是在菜单面板中感兴趣的 .ui-selectonemenu-item 上触发 click 事件。

给定一个

<p:selectOneMenu widgetVar="selectYear">

您可以 select jQuery 中的第 3 项，如下所示

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>

这只是一个小往返。

Answer 2

根据 3.4 到 5.1 的 PF 文档，如果在 p:selectOneMenu 上分配 widgetVar 属性，则可以在小部件上调用 selectValue(value)。

这会 select 指定值，但假定您知道目标值字符串和大小写。

它不适用于数字索引。

使用 jQuery 更改 p:selectOneMenu 的项目

Change item of p:selectOneMenu using jQuery

jquery

selectonemenu

primefaces

jsf-2