Get real value from ADF af:selectOneChoice with javascript

I got to know (from a thread : https://forums.oracle.com/forums/thread.jspa?threadID=2351565&tstart=0)about a particular scenario where items values are displayed or rendered as select item's index in html.Therefore in javascript the select items values are populates as index values not items values.

Previous code in jspx page is :

<af:selectOneChoice label="Set Log Level" id="soc1"

                              value="#{SelectManagedBean.loggerDefault}">

            <af:selectItem label="select one" value="First" id="s6"/>

            <af:selectItem label="select two" value="Second" id="s56"/>

           

            <af:clientListener method="setLogLevel" type="valueChange"/>

          </af:selectOneChoice>

          <af:resource type="javascript">

            function setLogLevel(evt) {

                var selectOneChoice = evt.getSource();

                var logLevel = selectOneChoice.getSubmittedValue();

              //  var logLevelObject = AdfLogger.NONE;

                alert("new value is : " + logLevel);

                //alert(evt.getSelection);

               

                //alert(logLevelObject);

                evt.cancel();

            }

          </af:resource>

And the output in browser is :

This is because in html, the following codes are generated by ADF

<select id="soc1::content" name="soc1" class="x2h"><option value="" _adfTmpOpt="t"></option><option value="0">select one</option><option value="1">select two</option></select>

The workaround is :

I have added valuePassThru="true" in af:selectOneChoice component. The full jspx code is :

<af:selectOneChoice label="Set Log Level" id="soc1"

                              value="#{SelectManagedBean.loggerDefault}"

                              valuePassThru="true">

            <af:selectItem label="select one" value="First" id="s6"/>

            <af:selectItem label="select two" value="Second" id="s56"/>

           

            <af:clientListener method="setLogLevel" type="valueChange"/>

          </af:selectOneChoice>

          <af:resource type="javascript">

            function setLogLevel(evt) {

                var selectOneChoice = evt.getSource();

                var logLevel = selectOneChoice.getSubmittedValue();

              //  var logLevelObject = AdfLogger.NONE;

                alert("new value is : " + logLevel);

                //alert(evt.getSelection);

               

                //alert(logLevelObject);

                evt.cancel();

            }

          </af:resource>

And the output in browser is as expected.

And the generated html is :

<select id="soc1::content" name="soc1" class="x2h">

<option value="" _adfTmpOpt="t"></option>

<option value="First">select one</option>

<option value="Second">select two</option>

</select>

The select item values are also populated in correct way.