jquery dynamic select doesn't submit values

jquery dynamic select doesn't submit values

I have a form that includes three select boxes. The first one is categories, and selecting a category from it will populate the variables multi-select box with values specific to the selected category. Selecting variables and then clicking "add selected" will populate the target select box will those variables. The problem is, print_r shows that the values in the target select box aren't passed upon submit, and I don't understand why... Below is the code, and help is really appreciated

Here's the html markup: 

  1. <select multiple="" id="categories" name="categories[]">
       
    <option class="category" value="Income">Income</option>
       <option class="category" value="Gender">Gender</
    option>
       
    <option class="category" value="Age">Age</option>
    </
    select>


    //note that i'm only showing variables for a presumably select category
    <select multiple="multiple" id="variables" name="variables[]">
      
    <option value="2">Less Than $15,000</option>
      <option value="3">$15,000 - $19,999</
    option>
      
    <option value="4">$20,000 - $29,999</option>
      <option value="5">$30,000 - $39,999</
    option>
      
    <option value="6">$40,000 - $49,999</option>
      <option value="11">$90,000 - $99,999</
    option>
      
    <option value="12">$100,000 - $124,999</option>
      <option value="13">$125,000 - $149,999</
    option>
      
    <option value="14">Greater than $149,999</option>
    </
    select>


    <select name="target[]" id="target" multiple="multiple" height="60">
    </select>
And here's the jquery:

  1. $(function(){
     
    var  opts    = {}, 
          $cats   
    = $("#categories"), 
          $target 
    = $("#target"),
          $vars   
    = $("#variables");
     
     $vars

    .find("option").each(function(){
         
    var $opt  = $(this),
             cat   
    = this.className,
             value 
    = this.value,
             label 
    = $opt.text();
         
         

    if(!opts[cat]) { opts[cat] = []; }
         
         opts

    [cat].push({label: label, value: value});

         $opt

    .remove();
     
    });
     
     

    function update_variables(){
         
    var cat = $cats.val(), new_opts = [];
         $vars
    .empty();

         $

    .each(opts[cat], function(){
           
    if( $target.find('[value=' + this.value + ']').length === 0 ){
             new_opts
    .push(option(this.value, this.label));
           
    }
         
    });

         $vars

    .html(new_opts.join(''));
     
    }
     
     

    function option(value, label){
       
    return "<option value='" + value + "'>" + label + "</option>";
     
    }
     
     $

    ("#add").click(function(e){
       e
    .preventDefault();
       $vars
    .find(':selected').appendTo($target).attr('selected',false);
       update_variables
    ();
     
    });
     
     $

    ("#remove").click(function(e){
       e
    .preventDefault();
       $target
    .find(':selected').remove();
       update_variables
    ();
     
    });
     
     $cats

    .change(function(){
       update_variables
    ();
     
    }).change();
    })