I've created a VF page that is integrated into our standard Contact layout. I have two multi select list boxes that are passed values back and forth using jquery. Passing a value from one to the other causes an error when I try to retrieve the value(s) of either list box.

The error shows the id of the list box in with the new passed values e.g. Error: j_id0:productionAdd:j_id3:productionSection:productionNumbers: Validation Error: Value is not valid

All the documentation I've seen to this point refers to multi select lists and Strings but the select options have Ids as values. Here is my extension class:

public with sharing class quickCreateProduction {
	
	private ApexPages.StandardController controller;
	
	public quickCreateProduction(ApexPages.StandardController controller) {
		
		this.controller = controller;
		
	}
	
	Id id = ApexPages.currentPage().getParameters().get('id');

	String[] productionNumbers = new String[]{};
	
	List<SelectOption> productionOptions = new List<SelectOption>();
	List<SelectOption> selectedOptions = new List<SelectOption>();

	ApexPages.Standardsetcontroller accBranch = new ApexPages.Standardsetcontroller(Database.getQueryLocator([SELECT Id FROM Contact WHERE Id =: id AND Account.RecordTypeId = '01230000000Q9p4AAC']));

	public Integer i {

		get { return accBranch.getResultSize(); }
		set { this.i = i; }
		
	}
	
	ApexPages.Standardsetcontroller ap = new ApexPages.Standardsetcontroller(Database.getQueryLocator([SELECT Id FROM Production_No__c WHERE Branch__c IN (SELECT AccountId FROM Contact WHERE Id =: id) AND Id NOT IN (SELECT Production_No__c FROM Production_Member__c WHERE Contact__c =: id)]));
	
	public Integer j {

		get { return ap.getResultSize(); }
		set { this.j = j; }
		
	}
	
	public List<SelectOption> getProductionOptions() {
		
		List<SelectOption> options = new List<SelectOption>();
		
		for (Production_No__c productionNo : [SELECT Id, Name, Branch__c FROM Production_No__c WHERE Branch__c IN (SELECT AccountId FROM Contact WHERE Id =: id) AND Id NOT IN (SELECT Production_No__c FROM Production_Member__c WHERE Contact__c =: id)]) {
			
			options.add(new SelectOption(productionNo.Id, productionNo.Name));
			
		}

		return options;
		
	}
	
	public void setProductionOptions(List<SelectOption> productionOptions) {
		
		this.productionOptions = productionOptions;
		
	}

	public String[] getProductionNumbers() {
		
		return productionNumbers;
	}
	
	public void setProductionNumbers(String[] productionNumbers) {
		
		this.productionNumbers = productionNumbers;
		
	}
	
	public List<SelectOption> getSelectedOptions() {
		
		List<SelectOption> options = new List<SelectOption>();
		
		for (Production_Member__c productionNo : [SELECT Production_No__c, Production_No__r.Name FROM Production_Member__c WHERE Contact__c =: id]) {
			
			options.add(new SelectOption(productionNo.Production_No__c, productionNo.Production_No__r.Name));
			
		}
		
		return options;
		
	}

	public void setSelectedOptions(List<SelectOption> selectedOptions) {
		
		this.selectedOptions = selectedOptions;
		
	}
	
	List<Id> selectedNumbers = new List<Id>();
	
	public List<Id> getSelectedNumbers() {
		
		return selectedNumbers;
	}
	
	public void setSelectedNumbers(List<Id> selectedNumbers) {
		
		this.selectedNumbers = selectedNumbers;
		
	}
	
	public String newProdNo {
		
		get { return newProdNo; }
		set { this.newProdNo = value; } 
		
	}
	
	public PageReference save() {
		
		ApexPages.Message msg = new ApexPages.message(ApexPages.Severity.INFO , 'Available: ' + productionNumbers + ' Selected: ' + selectedNumbers);
		ApexPages.addMessage(msg);

		return ApexPages.currentPage();
		
	}

}

VF:

<apex:page standardController="Contact" extensions="quickCreateProduction" showHeader="false" sidebar="false" tabStyle="Production_No__c">
<apex:includeScript value="{!$Resource.jQuery}" />
<script language="javascript" type="text/javascript">
$(document).ready(function(){

	$('#add').click(function () {
 		
 		$('.firstSelect :selected').appendTo('.secondSelect');
  			return false;


	});

	$('#remove').click(function () {
 		
 		$('.secondSelect :selected').appendTo('.firstSelect');
  			return false;


	});
	
	$('form').submit(function () {
	
		$('.firstSelect').each(function () { $('.firstSelect option').attr('selected', 'selected'); });
		
		$('.secondSelect').each(function () { $('.secondSelect option').attr('selected', 'selected'); });
	
	});

});
</script>
	<apex:form id="productionAdd" rendered="{!(i > 0)}">
		<apex:pageBlock >
			<apex:pageMessages />
			<apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Save" action="{!save}"/>
                <apex:actionSupport event="onclick" rerender="productionNumbers" />
            </apex:pageBlockButtons>
            <apex:pageBlockSection id="productionSection" title="Select Production Number(s) for Membership" rendered="{!(j > 0)}">
				<apex:outputLabel for="productionNumbers" value="Available Production No(s):" /><br />
				<apex:selectList id="productionNumbers" styleClass="firstSelect" value="{!productionNumbers}" multiselect="true" size="4">
					<apex:selectOptions value="{!productionOptions}" />
				</apex:selectList>
				<button id="add" class="btn" type="button">&#62;</button><br />
				<button id="remove" class="btn" type="button">&#60;</button><br />
				<apex:outputLabel for="selectedNumbers" value="Selected Production No(s):" /><br />
				<apex:selectList id="selectedNumbers" styleClass="secondSelect" value="{!selectedNumbers}" multiselect="true" size="4">
					<apex:selectOptions value="{!selectedOptions}" />
				</apex:selectList>
			</apex:pageBlockSection>
			<apex:pageBlockSection id="productionNew" title="Create Production Number for Membership">
				<apex:outputLabel for="newProdNo" value="New Production No*:" title="" /><br />
				<apex:inputText value="{!newProdNo}" /><br />
				<apex:outputText style="font-style: italic; font-size: 10px;" value="*Enter a new Production Number to this Contact and associated Branch. This will also create a Production Membership" /><br />
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>

 I have tried to define selectedNumbers just like productionNumbers without any success.

The only other thing I can think of is that the jquery isn't passing the correct values, but when I change the get/set for either the productionNumbers or selectedNumbers variable using automatic properties e.g. get; set; I get a similar error, like:

Error: Conversion Error setting value 'a0BQ0000000y4KRMAY a0BQ0000000y4LAMAY a0BQ0000000y4LFMAY' for '#{productionNumbers}'.

I may be wrong, but that shows that the jquery is passing the correct Id values. I know they're not comma separated, but is that really the problem?

Thanks in advance for your help