Command button in Visualforce can't read selec

Question

I am looking for help from Visualforce (Salesforce) page guru.

Background: There is a drop down list (apex:selectList in terms of Visualforce page). Its select options are built by jQuery with returned data (in JSON format) from RemoteAction (in Controller).

Problem: it always reports error message (j_id0:j_id2:j_id3:j_id4:orgList: Validation Error: Value is not valid) when I click command button which sends selected item value to Controller.

Any thoughts? Thanks very much.

Troy

Visualforce markup:

<apex:panelGrid columns="2">
<apex:selectList id="orgList" value="{!selected}"  size="1">
</apex:selectList>
<apex:commandButton value="Add" action="{!add}" style="width:80px">
</apex:panelGrid>

JavaScript:

$j("input[id$='azc']").keyup(function(){
   var op = $j("select[id$=orgList]");
    if($j(this).val().length >= 6){
             op.empty().append('<option value=""></option>');
             OrgController.findOrgs($j(this).val(), function(result, event){
                  if(event.status){
                      var data =  $j.parseJSON('[' + result.replace(/'/g, '"') + ']');
                      $j.each(data, function(){
                          $j('<option />', {value: this['value'], text: this['label']}).appendTo(op);
                      }); 
                  }else{
                      alert(event.message);             
                  } 
              },{escape:true});
        } 

OrgController

public String selected { get; set; }
public PageReference add(){
    Customer__c customer =  findSelected(selected);
    if(customer != null){
      customer.Pending__c = 'Yes';
      update customer; 
    }
    return null;
}

Answer 1

I would try to use a normal (html) select list and send selected value to controller per hidden field like this (works for me):

<!-- If the user selects an option - we will fill out the hidden field with that value -->
<select size="1" id="orgList" onChange="jQuery('[id$=hiddenField]').val(document.getElementById(this.id).value);">
    <option value="none">--Please select--</option>
</select>

<!-- Now add new options -->
<script>
    var myOptions = {
        val2 : 'Val 2',
        val3 : 'Val 3'
    };

    var mySelect = jQuery('#orgList');

    jQuery.each(myOptions, function(val, text) {
        mySelect.append( jQuery('<option></option>').val(val).html(text) );
    });

</script>

<!-- Here is the hidden field assigned to the apex variable -->
<apex:inputHidden value="{!myselected}" id="hiddenField"/>

<apex:commandButton reRender="none" value="Get value"/>