jquery动态选择不提交值 [英] jquery dynamic select doesn't submit values

问题描述

编辑...我只是一个虚拟人物，想出来了！

编辑：所以，它看起来如果我突出显示目标选择框中的所有内容，然后单击添加选择，它将提交...如何在下面的代码中更正该行为，以便您不必单击添加选定按钮即可得到它要工作？

我有一个包含三个选择框的表单。第一个是类别，从中选择一个类别将使用特定于所选类别的值填充变量多选框。选择变量然后点击添加选择将填充目标选择框将这些变量。问题是，print_r表示目标选择框中的值在提交时不会传递，我不明白为什么...以下是代码，帮助非常感谢

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

这是html标记：

<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>

这里是jquery代码：

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

推荐答案

我看不到所有你的代码，所以原谅我，如果我指出一些明显的东西。

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

希望这有助于

这篇关于jquery动态选择不提交值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！