【发布时间】：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>【问题讨论】：
-
“未过滤”是什么意思？
-
如果我在第一个字段（家庭）中选择“烹饪”，我应该在第二个字段中看到“意大利、墨西哥、日本和希腊”。
-
啊，好的。明白了。
-
如果我在第一个字段（家庭）中选择“语言”，我应该在第二个字段中看到“西班牙语、中国语和法语”。但是复制后就不行了。
-
明白。感谢您的澄清。
标签： javascript html jquery forms function