使用 JS 在 p:selectOneMenu 中选择选项答案

【问题标题】：Selecting option in p:selectOneMenu using JS使用 JS 在 p:selectOneMenu 中选择选项
【发布时间】：2015-10-30 05:52:44
【问题描述】：

我正在尝试使用 javascript 在 selectOneMenu 中预先选择用户所在的国家/地区。问题是当页面最初加载时，列表仍然在第一个元素上。但是，如果我单击箭头展开列表，然后单击页面上的其他位置使列表消失，则该值是由javascript设置的。

<p:selectOneMenu styleClass="inputField selectOneMenuColored" required="true" editable="false" id="country" value="#{subscribeUser.user.countryBean}" converter="#{countriesConverter}" effect="fold">
   <f:selectItems value="#{countriesConverter.countries}" var="country" itemLabel="#{country.shortName}" itemValue="#{country}" />
</p:selectOneMenu>

和javascript：

<script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script>
<h:body id="whole" onload="setSelectedIndex('form:country_input',geoplugin_countryName());">
...
function setSelectedIndex(menuId, val){
    var menu = document.getElementById(menuId);
    var opts = menu.options;
    for( j = 0; j < opts.length; j++) {
        if(opts[j].value == val) {
            opts[j].selected= "true";
        }
    }
}

【问题讨论】：

一个问题：你为什么要以这种复杂的方式尝试这个？
一个回应：因为我很笨，不知道简单的方法。
在#{subscribeUser.user.countryBean} bean 中设置一个值？
或使用 PrimeFaces javascript api
@HatemAlimam：这是一个诚实的问题（好吧，也许我的手机制定的不太理想）。可能有一个非常正当的理由在客户端执行它......尽管通过 javascript api 执行它是客户端。总是想知道为什么人们不使用文档，甚至知道这些“复杂”的 jsf 组件有一个客户端 api#{subscribeUser.user.countryBean}

标签： javascript jsf primefaces selectonemenu

【解决方案1】：

我不确定目标是什么，但答案是这样的：

按值选择：

PF('selectOneMenuWV').selectValue('3')

按标签选择：

PF('selectOneMenuWV').selectItem(PF('selectOneMenuWV').jq.find('.ui-selectonemenu-item[data-label*="Option Label"]'))

注意你应该定义一个widgetVar，在这个例子中是selectOneMenuWV。

<p:selectOneMenu ... widgetVar="selectOneMenuWV">

【讨论】：

使用 JQuery 应该也能正常工作：PF('selectOneMenuWV').selectItem($('[data-label="Option Label"]'))
@PedroPinheiro：是的，但我认为这个选择器更昂贵（遍历整个文档而不是相对于组件）