使用 jQuery 更改 p:selectOneMenu 的项目答案

【问题标题】：Change item of p:selectOneMenu using jQuery使用 jQuery 更改 p:selectOneMenu 的项目
【发布时间】：2015-06-21 20:52:12
【问题描述】：

我有一个 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> 未更新。这是如何引起的，我该如何解决？

【问题讨论】：

标签： jquery jsf-2 primefaces selectonemenu

【解决方案1】：

<p:selectOneMenu> 基本上是 <div><ul><li> 上的 <select><option> 层，在视觉上是隐藏的。 DOM 中对<select><option> 的任何更改都不会反映在<div><ul><li> 中。它只会反过来发生。

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

给定一个

<p:selectOneMenu widgetVar="selectYear">

您可以选择 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>

这只是一次小小的往返。

【讨论】：

太棒了！！完美运行。非常感谢您的出色回答。祝你有美好的一天:)
欣赏您找到时间和动力来回答此类问题的方式。

【解决方案2】：

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

这确实选择了指定的值，但假定您知道目标值字符串和大小写。

它不适用于数字索引。

【讨论】：