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