I'm trying to pre-select the country of user in a selectOneMenu using javascript. The problem is that when the page initially loads the list is still on the first element. However if I click on the arrow to expand the list, and then click somewhere else on the page to make the list disappear, then the value is the one set by 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>

and the javascript:

<script language="JavaScript" src=".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";
        }
    }
}

I'm trying to pre-select the country of user in a selectOneMenu using javascript. The problem is that when the page initially loads the list is still on the first element. However if I click on the arrow to expand the list, and then click somewhere else on the page to make the list disappear, then the value is the one set by 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>

and the javascript:

<script language="JavaScript" src="http://www.geoplugin/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";
        }
    }
}

• javascript
• jsf
• primefaces
• selectonemenu

• One question: Why do you try this in this plicated way? – Kukeltje Commented Aug 7, 2015 at 1:46
• One response: because I'm stupid and don't know the easy way. – Ced Commented Aug 7, 2015 at 4:59
• Setting a value in the #{subscribeUser.user.countryBean} bean? – Kukeltje Commented Aug 7, 2015 at 6:24
• Or using the PrimeFaces javascript api – Kukeltje Commented Aug 7, 2015 at 6:36
• @HatemAlimam: And it was an honest question (ok maybe formulated less optimally from my mobile phone). There might have been a very valid reason todo it client side… although doing it via the javascript api is client side to. Always wonder why people do not use documentation or even know that these 'plex' jsf ponents have a client-side api#{subscribeUser.user.countryBean} – Kukeltje Commented Aug 7, 2015 at 7:44

1 Answer 1

I'm not sure what's the goal but the answer is this:

Select by value:

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

Select by label:

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

Note that you should define a widgetVar, which is selectOneMenuWV in this example.

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