Apex:selectList value not getting set in controller

Question

I have apex:selectlist on my vf page which is populated by a selectoptionList. In my Vf page i also use jquery to dynamically add a new option. But this does not pass the selected option to the controller. The newly added option is not passed.

On searching for the cause i came upon another question on the boards http://forums.sforce.com/t5/forums/forumtopicprintpage/board-id/Visualforce/message-id/31836/print-single-message/false/page/1

which mentions that SF does a validation if the selected value is part of the original selectoption and if it isnt then doesnt pass the value.

To work around this

I thought i could call an actionfunction and use jquery to get the selected value of the select and pass this value as parameter and assign to a controller variable. But this also doesnt seem to work.

VF Page

 // Adding the new option
 if (!selects.find('option[value="' + accid + '"]').length) {
 alert(accid);
 selects.append('<option value="' + accid + '">Attach to Existing : ' + accname + '</option>');
 }

selects.change(function(){ // this captures the change event
alert('selected value is ' + $(this).val()); 
var selAccount = $(this).val();
alert(selAccount); // correct values are displayed on the alerts
setaccsel(selAccount);


<apex:actionFunction action="{!setselectedAcc}" name="setaccsel" rerender="">
            <apex:param name="Acc" assignTo="{!selectedAccounta}" value=""/>
</apex:actionFunction> 


<apex:pageBlockSectionItem id="pbsiAccountName">
            <apex:outputlabel value="Account Name" id="lbAccountName"/>
            <apex:outputPanel id="optableAccount" style="position:relative" layout="block">
            <apex:inputfield value="{!ct.AccountId}" id="accountLookup" />
            <apex:selectList id="selectedAccountId" value="{!selectedAccount}" size="1" styleClass="accSelectandlookup" style="width:250px" >
                <apex:selectOptions value="{!AccountList}"/> 
            </apex:selectList>
            </apex:outputPanel>      
        </apex:pageBlockSectionItem>

controller

 public PageReference setselectedAcc()
    {
        system.debug('setselectedAcc called');
        system.debug('Selected Accounta....BBBBBBB' + selectedAccounta);// This still shows the value of the first value in the selectoption list
        system.debug('Selected Account is on top' + selectedAccount);
        return null;
    }

Am i doing something wrong here?

Answer 1

I have had the same problem. The solution was to use tha native html select list and an visualforce hidden field. After each change on the selectlist the currently selected value is saved to the hidden field:

<!-- Here is the native select list. 
     It is empty, we fill it later with own options.
     Notice, that by onchange the selected value will be send to the hidden field. -->
<select id="someList" onchange="jQuery('[id$=selectedItemHidden]').val(jQuery(this).val());">
</select>

<!-- Hidden field with a reference to the apex variable -->
<apex:inputHidden value="{!selectedAccount}" id="selectedItemHidden"/>

<!-- Here we fill the select list with some options -->
<script>
for(var i = 0; i < optionsArray.length; i++)
{
    var opt = new Option(optionsArray[i],optionsArray[i]);
    jQuery("select#someList").append(opt);
}
<script>

You can pre fill the html select list with options from the database:

Controller:

public class MyClass{
    // Here we define the list with accounts
    public List<Account> accounts { get; set; }

    // In constructor we will read the accounts
    public MyClass(){
        accounts = [ Select Id, Name From Account Limit 10 ];
    }
}

Page:

<!-- Here we just use repeat function to iterate the list -->
<select id="someList">
    <apex:repeat value="{!accounts}" var="a">
        <option value="{!a.id}">{!a.name}</option>
    </apex:repeat>
</select>