使用带有添加和删除元素条件的 jQuery 克隆表单
Posted
技术标签:
【中文标题】使用带有添加和删除元素条件的 jQuery 克隆表单【英文标题】：Clone Form using jQuery with add and remove elements conditions 【发布时间】：2016-06-26 05:11:13 【问题描述】：所以，我想克隆我的选择选项表单，当它已经满足条件时（例如，在这种情况下，用户选择 'THEN' 运算符）然后表单将显示一个固定的内容（风险 - 高），隐藏特定链接（添加更多）并显示提交按钮。
困扰我的是，我的代码仅在我选择运算符时才适用于第一种形式。我想要的是，我希望在添加的每个最后一个表单上都执行它。
例如，我需要这样的输出：
如果年龄大且 ldl 高且 hdl 低且 sistolic 高 THEN 风险很高
这是我的代码：
function rule(id_counter)
if (id_counter != 0)
var abc = $('#var_name' + id_counter).val();
else
var abc = $('#var_name').val();
$.ajax(
url: 'search_coll.php',
type: 'post',
data:
selected_item: abc
,
success: function(response)
if (id_counter != 0)
$('#var_name' + id_counter).html(response);
else
$('#var_name').html(response);
,
error: function()
console.log('Request failed.')
);
;
$(document).ready(function()
var count = 1;
$('#clone').click(function()
var ab = $('#tobecloned').clone();
ab.find('select').attr('id', function(i, val)
return val + count;
);
ab.find('.js_variable').attr('onChange', function(i, val)
return "rule("+ count +")";
);
$('#tab').append(ab);
count++;
);
);<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table id="tab">
<tr id="tobecloned">
<td>
<select name="id_var[]" id="var_name" class="js_variable" onChange="rule(0)">
<option>Choose Variable</option>
<?php include "../connect.php"; $query_v=m ysqli_query($connection, "SELECT * from variables ORDER BY id_var"); while($result_v=mysqli_fetch_array($query_v, MYSQLI_ASSOC)) ?>
<option value="<?php echo $result_v['id_var'];?>">
<?php echo $result_v[ 'var_name'];?>
</option>
<?php ?>
</select>
</td>
<td>
<select name="coll_name">
<option>Choose Collection</option>
</select>
</td>
<td>
<select name="operator">
<option>Choose Operator</option>
<option value="AND">AND</option>
<option value="THEN">THEN</option>
</select>
</td>
</tr>
<tr id="showifthen">
<!-- i want to show this, if the user choose THEN from the last appended/cloned select operator -->
<td>
<select name="var_name">
<option>Risk</option>
</select>
</td>
<td>
<select name="coll_name">
<option>High</option>
</select>
</td>
</tr>
</table>
<a href="#" id="clone">Add More</a>
<!-- this should be hidden if user choose THEN -->
<a type="submit" id="hideatfirst" hidden>Submit</a>
<!-- i want this to be hidden at first, and shown when user choose THEN from the last appended/cloned select operator -->
</body>
</html>感谢之前
【问题讨论】：
@OP，分享解析后的HTML..而不是<?php....
【参考方案1】：
这里有一些问题。
选择并不都有 ID，因此尝试更新它们的循环会将它们设置为 NaN。
但是，您在集合上使用.attr('id')，无论如何它只返回第一个 ID，而不是全部。
要依次对每个元素进行操作，请像这样使用.each()：
ab.find('select').each(function()
var el = $(this)
el.attr('id', el.attr('id') + count)
);
为了在选择值更改时采取行动，您需要为其分配一个带有.change() 的更改处理程序，类似于
$('#operator').change(function()
operatorSelect($(this))
)
您必须在克隆它们时为每个选择单独分配更改处理程序，并且您可能希望禁用每个先前的操作符选择，这样就不会对更改哪个操作有歧义。
我发现这是一个有趣的小消遣，所以我整理了一个快速小提琴来演示：https://jsfiddle.net/xosqw00p/
【讨论】：
啊，无论如何，禁用选项不会让我发布值。所以，我保持启用:)以上是关于使用带有添加和删除元素条件的 jQuery 克隆表单的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript课程——Day21（jQuery下class操作css操作元素宽高元素的位置滚动条创建.添加.替换.删除.克隆节点事件滑上事件的区别）