使用 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/
谢谢!
最佳答案
您看到表单的原始实例和克隆实例之间存在差异的原因有两个:
表单依赖于
name
属性来正确提交。在某些情况下,提交具有重复name
d 字段的表单将导致一个数组被发送到服务器;在其他情况下,它将覆盖。没有看到表单的其余部分 - fiddle 不是特别有用,抱歉 - 在我看来你的 jQuery 选择器也可能从克隆中返回元素。为了解决这个问题,您可以给表单的每个实例一个唯一的 ID,并将您的表单更改逻辑从它自己的
$('#form-n')
对象链接起来,其中“n”是替换为表格的连续 ID 号。
关于javascript - 使用 jQuery 创建表单克隆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12346248/