英文:
Select2 disappearing, after adding dynamic form
问题
问题是，每次单击"addNewItemBtn"按钮时，先前字段的"select2"函数会消失。在加载页面时，"select2"仍然有效。但在单击"addNewItemBtn"按钮后，您可能会注意到"select2"函数在添加新字段后消失。您如何使即使在添加新字段后，先前字段的状态仍然保持不变？
解决方案：
要解决这个问题，您可以在将新字段添加到表格后，重新初始化"select2"，以便新字段也具有"select2"功能。这是您的代码示例的修改版本：
$(document).ready(function() {
// set dropdown to select2
$('#warehouse_id').select2();
$('.product_id').select2();
$('.unit_of_measure_id').select2();
$('.product_type_id').select2();
$('#addProductItemBtn').click(function(e) {
e.preventDefault();
let productItems = $('tbody tr').length;
let productItem = `
<!-- Your new table row content -->
`;
$('tbody').append(productItem);
// Reinitialize select2 for all relevant elements
$('#product_type_id, #product_id, #unit_of_measure_id').select2();
$('.deleteProductItemBtn').click(function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
});
});
通过在添加新字段后重新初始化"select2"，您可以确保新字段也具有相同的功能，而不会影响先前字段的状态。
英文:
i have a problem regarding select2, what happen is I have a dynamic form with few select2, but everytime I click the addNewItembtn the previous fields' select2 function will disappear.
here's the code:
$(document).ready(function() {
// set dropdown to select2
$('#warehouse_id').select2();
$('.product_id').select2();
$('.unit_of_measure_id').select2();
$('.product_type_id').select2();
$('#addProductItemBtn').click(function(e) {
e.preventDefault();
let productItems = $('tbody tr').length;
let productItem = `
<tr>
<td>
<select name="productItems[${productItems}][product_type_id]" id="product_type_id" class="form-control product_type_id">
<option value="">-- Product Type --</option>
@foreach ($productTypes as $productType)
<option value="{{ $productType->id }}"
@selected(old("productItems.{$loop->index}.product_type_id"))>
{{ $productType->title }}
</option>
@endforeach
</select>
</td>
<td>
<select name="productItems[${productItems}][product_id]" id="product_id" class="form-control product_id">
<option value="">-- Product --</option>
@foreach ($products as $product)
<option value="{{ $product->id }}"
@selected(old("productItems.{$loop->index}.product_id"))>
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" name="productItems[${productItems}][serial_number]" id="serial_number" class="form-control serial_number">
</td>
<td>
<input type="brand" name="productItems[${productItems}][brand]" id="brand" class="form-control brand">
</td>
<td>
<select name="productItems[${productItems}][unit_of_measure_id]" id="unit_of_measure_id" class="form-control unit_of_measure_id">
<option value="">-- UOM --</option>
</select>
</td>
<td>
<input type="number" name="productItems[${productItems}][quantity]" id="quantity" class="form-control quantity" value="1">
</td>
<td>
<input type="number" name="productItems[${productItems}][item_cost]" id="item_cost" class="form-control item_cost" value="0.00">
</td>
<td>
<a href="#" class="deleteProductItemBtn">Delete</a>
</td>
</tr>
`;
$('tbody').append(productItem);
$('.product_id').select2();
$('.unit_of_measure_id').select2();
$('.product_type_id').select2();
});
$(document).on('click', '.deleteProductItemBtn', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
});
Upon loading the page, the select2 is still working
first load
After clicking the add new item button
enter image description here
You may notice that the select2 function did disappear after adding new fields. How can I make it that even after adding new fields the state of the previous page will remain. TIA
How can I make it that even after adding new fields the state of the previous page will remain. TIA
答案1
得分: 1
以下是已翻译的内容：
这里出现了一个问题，原因是id="product_type_id"和id="product_id"。 ID 属性应该是唯一的，所以最好在创建行时创建动态的ID，或者干脆从代码中删除ID属性。换句话说，目前不需要这个。
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
$(document).ready(function () {
initSelect2();
$('#addProductItemBtn').click(function (e) {
e.preventDefault();
let productItems = $('tbody tr').length;
let productItem = `
<tr>
<td>
<select name="productItems[${productItems}][product_type_id]" class="form-control product_type_id">
<option value="">-- 产品类型 --</option>
@foreach ($productTypes as $productType)
<option value="{{ $productType->id }}"
@selected(old("productItems.{$loop->index}.product_type_id"))>
{{ $productType->title }}
</option>
@endforeach
</select>
</td>
<td>
<select name="productItems[${productItems}][product_id]" class="form-control product_id">
<option value="">-- 产品 --</option>
@foreach ($products as $product)
<option value="{{ $product->id }}"
@selected(old("productItems.{$loop->index}.product_id"))>
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" name="productItems[${productItems}][serial_number]" class="form-control serial_number">
</td>
<td>
<input type="text" name="productItems[${productItems}][brand]" class="form-control brand">
</td>
<td>
<select name="productItems[${productItems}][unit_of_measure_id]" class="form-control unit_of_measure_id">
<option value="">-- UOM --</option>
</select>
</td>
<td>
<input type="number" name="productItems[${productItems}][quantity]" class="form-control quantity" value="1">
</td>
<td>
<input type="number" name="productItems[${productItems}][item_cost]" class="form-control item_cost" value="0.00">
</td>
<td>
<a href="#" class="deleteProductItemBtn">删除</a>
</td>
</tr>
`;
$('tbody').append(productItem);
initSelect2();
});
$(document).on('click', '.deleteProductItemBtn', function (e) {
e.preventDefault();
$(this).closest('tr').remove();
});
function initSelect2() {
$('#warehouse_id').select2();
$('.product_id').select2();
$('.unit_of_measure_id').select2();
$('.product_type_id').select2();
}
});
<!-- 语言：lang-html -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<button id="addProductItemBtn">添加项目</button>
<table>
<tbody></tbody>
</table>
<!-- 结束代码片段 -->
英文:
Here is issue happening due to id="product_type_id" id="product_id". The ID property should be unique so it's better to create dynamic ID's with row creation or simply remove the ID attribute from code. In other words you cannot need that for now.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function () {
initSelect2();
$('#addProductItemBtn').click(function (e) {
e.preventDefault();
let productItems = $('tbody tr').length;
let productItem = `
<tr>
<td>
<select name="productItems[${productItems}][product_type_id]" class="form-control product_type_id">
<option value="">-- Product Type --</option>
@foreach ($productTypes as $productType)
<option value="{{ $productType->id }}"
@selected(old("productItems.{$loop->index}.product_type_id"))>
{{ $productType->title }}
</option>
@endforeach
</select>
</td>
<td>
<select name="productItems[${productItems}][product_id]" class="form-control product_id">
<option value="">-- Product --</option>
@foreach ($products as $product)
<option value="{{ $product->id }}"
@selected(old("productItems.{$loop->index}.product_id"))>
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" name="productItems[${productItems}][serial_number]" id="serial_number" class="form-control serial_number">
</td>
<td>
<input type="brand" name="productItems[${productItems}][brand]" id="brand" class="form-control brand">
</td>
<td>
<select name="productItems[${productItems}][unit_of_measure_id]" class="form-control unit_of_measure_id">
<option value="">-- UOM --</option>
</select>
</td>
<td>
<input type="number" name="productItems[${productItems}][quantity]" id="quantity" class="form-control quantity" value="1">
</td>
<td>
<input type="number" name="productItems[${productItems}][item_cost]" id="item_cost" class="form-control item_cost" value="0.00">
</td>
<td>
<a href="#" class="deleteProductItemBtn">Delete</a>
</td>
</tr>
`;
$('tbody').append(productItem);
initSelect2();
});
$(document).on('click', '.deleteProductItemBtn', function (e) {
e.preventDefault();
$(this).closest('tr').remove();
});
function initSelect2() {
$('#warehouse_id').select2();
$('.product_id').select2();
$('.unit_of_measure_id').select2();
$('.product_type_id').select2();
}
});
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<button id="addProductItemBtn">Add Item</button>
<table>
<tbody></tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论