选择时表单中的重复字段
Posted
技术标签:
【中文标题】选择时表单中的重复字段【英文标题】：Duplicate fields in a form upon selection 【发布时间】：2021-02-10 21:26:45 【问题描述】：我制作了一个表格来选择技能。做出第一个选择后，将显示第二个列表，其中包含取决于第一个选择的选项。 然后，“+”按钮允许复制字段并添加另一个技能。
我的问题：
初始表单是好的，但是当我按“+”时，创建的第二个表单不起作用（第二个“选择字段”没有根据第一个选择进行过滤。
你能帮忙吗？
非常感谢。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skill form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
</head>
<body>
<h1>Insert your skills</h1>
<div class="copycat">
<div id="form">
<form action="" method="post" name="addbloc">
<p>
<label for="tpl">Family :</label>
<select name="tpl" id="tpl">
<option value="">-- Select your family --</option>
<option value="Language" data-id='#champ1'>Language</option>
<option value="Cooking" data-id='#champ2'>Cooking</option>
</select><br />
<div class="champ" id="champ1">
<label for="Language">Skill :</label>
<select name="Language" id="Language">
<br/>
<option value="">-- Select your skill --</option>
<option value="Spanish" data-id='#champ1'>Spanish</option>
<option value="Chineese" data-id='#champ1'>Chineese</option>
<option value="French" data-id='#champ1'>French</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
<div class="champ" id="champ2">
<label for="Cooking">Skill :</label>
<select name="Cooking" id="Cooking">
<br/>
<option value="">-- Select your skill --</option>
<option value="Italian" data-id='#champ2'>Italian</option>
<option value="Mexican" data-id='#champ2'>Mexican</option>
<option value="Japanese" data-id='#champ2'>Japanese</option>
<option value="Greek" data-id='#champ2'>Greek</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
</p>
</form>
</div>
</div>
<!-- WIP ----- Submit button to store in database -->
<div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>
<script type="text/javascript">
// Show 2nd field according to first field selection
$(document).ready(function()
$('.champ').hide(); // on cache les champ par défaut
$('select[name="tpl"]').change(function() // lorsqu'on change de valeur dans la liste
$('.champ').hide();
var selectedDataID = $(this).find('option:selected').attr('data-id');
$(selectedDataID).show();
);
);
// Duplicate field when + button is pressed
function copycat()
$('.copycat:first').clone().appendTo($('#form'));
</script>
</body>
</html>【问题讨论】：
“未过滤”是什么意思？ 如果我在第一个字段（家庭）中选择“烹饪”，我应该在第二个字段中看到“意大利、墨西哥、日本和希腊”。 啊，好的。明白了。 如果我在第一个字段（家庭）中选择“语言”，我应该在第二个字段中看到“西班牙语、中国语和法语”。但是复制后就不行了。 明白。感谢您的澄清。 【参考方案1】：您不能将相同的ids 用于不同的元素，因此我将id 更改为html 属性，即：data-id。然后，当您从选择框中选择任何选项时，只有在@987654324 内的div @ 不应该更改其他动态添加的内容，因此请使用 $(this).closest("form").. 在表单 htmls 中进行更改。最后，这些元素是动态创建的，所以请使用$(document).on('change', 'select[name="tpl"]',..。
此外，您的copycat 函数正在复制整个 div，因此下次如果您按 +，它将显示 2 的选择副本等。要解决此问题，请使用 $('.copycat form:first')...。
演示代码：
$(document).ready(function()
$('.champ').hide();
$(document).on('change', 'select[name="tpl"]', function()
$(this).closest("form").find('.champ').hide(); //hide the champ div inside form which is there
var selectedDataID = $(this).find('option:selected').attr('data-id');
//get the div with dta-id of slected option
$(this).closest("form").find("div[data-id=" + selectedDataID + "]").show();
);
);
// Duplicate field when + button is pressed
function copycat()
//copy first form
$('.copycat form:first').clone().appendTo($('#form'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Insert your skills</h1>
<div class="copycat">
<div id="form">
<form action="" method="post" name="addbloc">
<p>
<label for="tpl">Family :</label>
<!--instead of id added data-id -->
<select name="tpl" id="tpl">
<option value="">-- Select your family --</option>
<option value="Language" data-id='champ1'>Language</option>
<option value="Cooking" data-id='champ2'>Cooking</option>
</select><br />
<!--added data-id-->
<div class="champ" data-id="champ1">
<label for="Language">Skill :</label>
<select name="Language" id="Language">
<br/>
<option value="">-- Select your skill --</option>
<option value="Spanish" data-id='#champ1'>Spanish</option>
<option value="Chineese" data-id='#champ1'>Chineese</option>
<option value="French" data-id='#champ1'>French</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
<!--added data-id-->
<div class="champ" data-id="champ2">
<label for="Cooking">Skill :</label>
<select name="Cooking" id="Cooking">
<br/>
<option value="">-- Select your skill --</option>
<option value="Italian" data-id='#champ2'>Italian</option>
<option value="Mexican" data-id='#champ2'>Mexican</option>
<option value="Japanese" data-id='#champ2'>Japanese</option>
<option value="Greek" data-id='#champ2'>Greek</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
</p>
</form>
</div>
</div>
<!-- WIP ----- Submit button to store in database -->
<div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>【讨论】：
谢谢@Swati。你让我很开心，我从你的回复中学到了很多东西！我希望有一天我能帮助你作为回报！ :-) 乐于助人:)以上是关于选择时表单中的重复字段的主要内容，如果未能解决你的问题，请参考以下文章