JQuery Dynamic Select Spring Bind

I have a problem where I have to dynamically generate dropdown boxes using jquery and spring bind them. I have a list in my form backing object and am attempting to bind it using a counter that increments.

I am getting the follwoing error:

org.springframework.beans.InvalidPropertyException: Invalid property 'selectedPermntRestrictCat[ + categoryCounter + ]' of bean class [com.portal.policymanagement.formObject.EditPolicyFormObject]: Invalid index in property path 'selectedPermntRestrictCat[ + categoryCounter + ]'; nested exception is java.lang.NumberFormatException: For input string: " + categoryCounter + "

$(document).ready(function(){
    var categoryCounter=0;
    $('#addCategory').click(function() {
        $('<div class="holder"><div class="left"><label> </label><form:select path="policy.selectedPermntRestrictCat[' + categoryCounter + ']"><form:option value="0" label="Select" /><form:option value="6" label="Entertainment" /><form:option value="7" label="Religion" /><form:option value="8" label="Weapons" /><form:option value="9" label="Virtual C开发者_运维百科ommunity" /><form:option value="10" label="Hacking" /><form:option value="11" label="Search Engines" /><form:option value="12" label="Educational" /><form:option value="13" label="Other" /><form:option value="14" label="TEST NON_EXISTANT" /><form:option value="1" label="Violence" /><form:option value="2" label="Drugs" /><form:option value="3" label="Adult Content" /><form:option value="4" label="Online Resources" /><form:option value="5" label="Gambling" /></form:select></div><div class="right"><a id="'+i+'" class="but_default" href="#">Delete</a></div><div class="errors left"></div><div class="clear"></div></div>').fadeIn('slow').appendTo('.blockedCategories');
        categoryCounter++;
    });
});

This code makes no sense because you mix server-side logic (Spring tags) with client-side logic (jQuery). The error you see is caused by the fact that <form:select>, being a server-side tag, is executed inside a Javascript literal during rendering of the page.

To solve your task you need to look at the HTML generated by your <form:select> during normal page rendering and create similar HTML with your jQuery code, it would be something like this:

$('<div class="holder"><div class="left"><label> </label><select name="policy.selectedPermntRestrictCat[' + categoryCounter + ']"><option value="0" label="Select" />...</select>...').fadeIn('slow').appendTo('.blockedCategories');