选定时表单中的重复字段
选定时表单中的重复字段
提问于 2020-10-28 13:41:38
我做了一张表格来选择技能。在作出第一选择后，第二列表显示的选项取决于第一选择。然后，一个"+“按钮允许复制字段，并添加另一个技能。
我的问题:
inital表单是可以的，但是当我按下"+“时，创建的第二个表单不起作用(第二个"select字段”不会根据第一个select进行筛选。
你能帮忙吗？
非常感谢。
<!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
Stack Overflow用户
回答已采纳
发布于 2020-10-28 14:00:38
您不能对不同的元素使用相同的ids，因此我必须将其更改为html属性，即:data-id .Then，当您从选择框中选择任何选项时，只有在form中的div不应该更改其他动态添加的属性，因此使用$(this).closest("form")..在表单htmls中进行更改。最后，这些元素是动态创建的，所以使用$(document).on('change', 'select[name="tpl"]',..。
另外，您的copycat函数正在复制整个div，所以下次按+时，它将显示2副本的select等.To修复这个使用$('.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64574117
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号