title: jquery dynamic select doesn't submit values
body: <p><strong>EDIT AGAIN ... I'm just a dummy and figured it out!</strong></p>
  
  <p><strong>EDIT: So, it looks like if I highlight everything in the target select box and click "Add selected", it submits... How do I correct that behavior in the code below so that you don't have to click the "Add selected" button to get it to work?</strong></p>
  
  <p>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</p>
  
  <p>Here's the html markup:</p>
  
  <pre><code>&lt;select multiple="" id="categories" name="categories[]"&gt;
     &lt;option class="category" value="Income"&gt;Income&lt;/option&gt;
     &lt;option class="category" value="Gender"&gt;Gender&lt;/option&gt;
     &lt;option class="category" value="Age"&gt;Age&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>//note that i'm only showing variables for a presumably select category</p>
  
  <pre><code>&lt;select multiple="multiple" id="variables" name="variables[]"&gt;
    &lt;option value="2"&gt;Less Than $15,000&lt;/option&gt;
    &lt;option value="3"&gt;$15,000 - $19,999&lt;/option&gt;
    &lt;option value="4"&gt;$20,000 - $29,999&lt;/option&gt;
    &lt;option value="5"&gt;$30,000 - $39,999&lt;/option&gt;
    &lt;option value="6"&gt;$40,000 - $49,999&lt;/option&gt;
    &lt;option value="11"&gt;$90,000 - $99,999&lt;/option&gt;
    &lt;option value="12"&gt;$100,000 - $124,999&lt;/option&gt;
    &lt;option value="13"&gt;$125,000 - $149,999&lt;/option&gt;
    &lt;option value="14"&gt;Greater than $149,999&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="target[]" id="target" multiple="multiple" height="60"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And here's the jquery code:</p>
  
  <pre><code>$(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 "&lt;option value='" + value + "'&gt;" + label + "&lt;/option&gt;";
   }
  
   $("#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();
  })
  </code></pre>