Я создал форму, которая содержит два раскрывающихся списка, когда пользователь выбирает элемент из первого списка, данные для второго автоматически обновляются. Для этого я использую jquery, и он отлично работает, за исключением того, что когда я дублирую форму, раскрывающийся список № 1 дублированной формы больше не обновляет раскрывающийся список № 2, поэтому я хотел бы знать, как могу ли я выполнить то же действие с клонированной формой (обновить раскрывающийся список, выбрав одну введенную в другой) и сохранить записи всех клонированных форм в базе данных.
Cordially!
вот код, который я использую
<form id="myForm">
<div id="clonedSection1" class="clonedSection">
<select class="form-control" name="productName[]" id="productName" >
<option value="0" selected>Selectionner le produit</option>
<option value="copy">Copie</option>
<option value="scan">Scan</option>
</select>
<select class="form-control" name="productPrice[]" id="quant" disabled>
<option value="pu" selected>P.U</option>
</select>
</div>
<div>
<input type="button" id="btnAdd" value="add another name" />
<input type="button" id="btnDel" value="remove name" />
</div>
<!-- script that allows you to modify the data in a drop-down list when an item is selected in another-->
<script type="text/javascript">
$("#productName").change(function () {
var val = $(this).val();
if (val == "copy") {
$("#quant").html("<option value='25'> 25$ </option>");
} else if (val == "scan") {
$("#quant").html("<option value='50'> 10$ </option>");
}
});
</script>
<!-- script that clones the form-->
<script type="text/javascript">
$(document).ready(function() {
$("#btnAdd").click(function() {
var num = $(".clonedSection").length;
var newNum = new Number(num + 1);
var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);
$(".clonedSection").last().append(newSection)
$("#btnDel").attr("disabled","");
});
$("#btnDel").click(function() {
var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
$("#clonedSection" + num).remove(); // remove the last element
// enable the "add" button
$("#btnAdd").attr("disabled","");
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$("#btnDel").attr("disabled","disabled");
});
$("#btnDel").attr("disabled","disabled");
});
</script>