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.

您可以在表单的Submit方法中执行此选择.像这样:

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