javascript - 使用 jQuery 创建表单克隆

Question

使用 jQuery，当在克隆中选择不同的值时，如何在不修改原始表单的情况下创建表单的克隆。目前，在克隆表单中选择一个值时，返回的结果会添加到克隆结果以及原始结果中。我只想为每个独特的形式显示结果。这是我所拥有的:

 <script>
      $(document).ready(function() {

         shows / hides results based on selection

         $(".color-select").live("change" ,function(){
            if($(this).val() == 'red'){ 
              $('.red').removeClass('hide');

               // toggles sub menus
              $(this).parent('.controls').find('.submenu-select').removeClass('hide');
            }

            if($(this).val() == 'orange'){ 

              $('.orange').removeClass('hide');
              $(this).parent('.controls').find('.submenu-select').addClass('hide');
            }
            if($(this).val() == 'yellow'){ 
              $('.yellow').removeClass('hide');
              $(this).parent('.controls').find('.submenu-select').addClass('hide');
            }
            if($(this).val() == 'green'){ 
              $('.green').removeClass('hide');
              $(this).parent('.controls').find('.submenu-select').addClass('hide');
            }
          });

; 
         // Duplicates category select menu 

           $(".add-color").click(function(){
          $(".color-category").clone().removeClass('color-category').appendTo("#we-want-to").find('.submenu-select').addClass('hide');

        });


        $(".add-color-alternate").click(function(){
          $(".color-category-alternate").clone().removeClass('color-category-alternate').appendTo("#we-want-to").find('.submenu-select, .results-table').addClass('hide');

        });

这是一些 html 的 fiddle http://jsfiddle.net/mckenney42south/Z4yFs/

谢谢!

Answer 1

您看到表单的原始实例和克隆实例之间存在差异的原因有两个:

• 表单依赖于 name 属性来正确提交。在某些情况下，提交具有重复named 字段的表单将导致一个数组被发送到服务器；在其他情况下，它将覆盖。

• 没有看到表单的其余部分 - fiddle 不是特别有用，抱歉 - 在我看来你的 jQuery 选择器也可能从克隆中返回元素。为了解决这个问题，您可以给表单的每个实例一个唯一的 ID，并将您的表单更改逻辑从它自己的 $('#form-n') 对象链接起来，其中“n”是替换为表格的连续 ID 号。