使用jQuery更改p:selectOneMenu的项目 [英] Change item of p:selectOneMenu using jQuery

问题描述

我有一个PrimeFaces 5.1 <p:selectOneMenu>，它在DOM中生成以下选择:

I have a PrimeFaces 5.1 <p:selectOneMenu> that generates in DOM the following 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>更改.

I have a <p:commandButton> that triggers a jQuery function that will handle changing my <p:selectOneMenu>.

<p:commandButton onclick="changeDropDownList();" />

jQuery函数:

function changeDropDownList()
{
    $('[id$=selectYear_input]')[0].selectedIndex = 2;
}

<p:selectOneMenu>未更新.这是怎么引起的，我该如何解决?

The <p:selectOneMenu> is not updated. How is this caused and how can I solve it?

推荐答案

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

The <p:selectOneMenu> is basically a <div><ul><li> layer over <select><option> which is visually hidden. Any changes to <select><option> in the DOM is not reflected in the <div><ul><li>. It happens only the other way round.

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

It has however a bunch of event listeners attached which should be reflected back in the hidden <select><option>. One way is triggering the click event on the .ui-selectonemenu-item of interest in the menu's panel.

给出一个

<p:selectOneMenu widgetVar="selectYear">

您可以在jQuery中选择以下第三项

You could select the 3rd item in jQuery as below

PF("selectYear").panel.find(".ui-selectonemenu-item:eq(2)").click();

---

或者，您也可以通过<p:ajax>(在幕后最终使用jQuery的

---

Alternatively, you could also just do it via <p:ajax> (which under the covers ultimately uses jQuery's $.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的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！