jquery dynamic select doesn't submit values

Question

EDIT AGAIN ... I'm just a dummy and figured it out!

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?

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:

<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 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 "<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();
})

Answer 1

I can't see all your code, so forgive me if I'm pointing out something obvious.

When you submit the form, all the items in the 'target' select box will need to be 'selected'. Otherwise the browser won't submit them in the request.

You can perform this selection in your form's submit method. Something like this:

$('#formid').submit(function() {
    $("#target").find('option').attr('selected',true);
});

Hope this helps