select2 gives duplicate dropdown(选择2给出了重复的下拉列表)
本文介绍了选择2给出了重复的下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在开发一个B2B订购应用程序,我使用简单的选择/下拉菜单来提供要订购的产品,并根据需要使用jQuery添加额外的行-所有这些都工作得很好。我现在已经将SELECT更改为SELET2以提供搜索。第一项可以正常工作,但如果添加额外的行,它会提供selt2框以及第一行的只读副本。见下图..
与selt2下拉菜单相关的代码
@foreach (old('products', ['']) as $index => $oldProduct)
<tr id="product{{ $index }}">
<td>
<select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;" >
<option value="">-- choose product --</option>
@foreach ($products as $product)
<option value="{{ $product->id }}"{{ $oldProduct == $product->id ? ' selected' : '' }}>
{{ $product->StockItemName }} -
(R {{ !floatval($product->DiscountPercentage) ?
( !empty($product->UnitPrice) ? number_format($product->UnitPrice, 2) : number_format($product->SellingPrice, 2) )
: number_format($product->SellingPrice - (($product->DiscountPercentage / 100) * $product->SellingPrice), 2) }})
</option>
@endforeach
</select>
</td>
</tr>
@endforeach
jQuery
$(document).ready(function(){
let row_number = {{ count(old('products', [''])) }};
$("#add_row").click(function(e){
e.preventDefault();
let new_row_number = row_number - 1;
$('#product' + row_number).html($('#product' + new_row_number).html()).find('td:first-child');
$('#products_table').append('<tr id="product' + (row_number + 1) + '"></tr>');
row_number++;
$('select').select2();
});
});
我想我的问题是重新加载了selt2$('select').select2();
如果保存此表单,则会保存正确的数据,而不会有任何不必要的重复。
如有任何帮助,我们将不胜感激
推荐答案
您之所以看到这种行为,是因为select2
插件创建了自己的html,因此当您使用.html()
从tr
获取内容时,您也会获得动态生成的html。相反,您可以使用.clone()
克隆您的tr
,然后从此克隆的树中获取选项,并将所有选项追加到新生成的树中。
演示代码:
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">$(document).ready(function() {
$(".custom-select").select2();
let row_number = 1; //just for demo..
$("#add_row").click(function(e) {
e.preventDefault();
var options = $("#products_table tbody tr:first").find("[name='StockItem[]']").html(); //get option inside select..
var cloned = $("#products_table tbody tr:first").clone() //get whole tr..
$(cloned).find("td:first").html('<select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;">' + options + '</select>') //add option ..
$(cloned).find("input").val("") //empty input values ..
$('#products_table tbody').append('<tr id="product' + (row_number + 1) + '">' + $(cloned).html() + '</tr>'); //append whole content
$('tbody tr:last select').select2(); //intialize your select2
row_number++;
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<table id="products_table">
<tbody>
<tr id="product0">
<td>
<select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;">
<option value="">-- choose product --</option>
<option value="{{ $product->id }}">
abc
</option>
</select>
</td>
<td><input type="text" value=""></td>
</tr>
<tr id="product1">
<td>
<select name="StockItem[]" class="select2 form-control mb-3 custom-select" style="width: 100%; height:36px;">
<option value="">-- choose product --</option>
<option value="{{ $product->id }}">
abc
</option>
</select>
</td>
<td><input type="text" value=""></td>
</tr>
</tbody>
</table>
<button id="add_row">Add</button>
这篇关于选择2给出了重复的下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:选择2给出了重复的下拉列表
基础教程推荐
猜你喜欢
- 在 Woocommerce 中根据运输方式和付款方式添加费用 2021-01-01
- WooCommerce 中选定产品类别的自定义产品价格后缀 2021-01-01
- 通过 PHP SoapClient 请求发送原始 XML 2021-01-01
- 如何在 PHP 中的请求之间持久化对象 2022-01-01
- 超薄框架REST服务两次获得输出 2022-01-01
- 在多维数组中查找最大值 2021-01-01
- Libpuzzle 索引数百万张图片? 2022-01-01
- XAMPP 服务器不加载 CSS 文件 2022-01-01
- 在 PHP 中强制下载文件 - 在 Joomla 框架内 2022-01-01
- mysqli_insert_id 是否有可能在高流量应用程序中返回 2021-01-01