我正在嘗試以Select2動態形式使用（使用 jQuery 克隆添加新行），但顯然克隆的行與Select2. 得到錯誤創建了第二個選擇菜單，但它產生了錯誤：Uncaught TypeError: $(...).select2 is not a function我正在使用這個 HTML 部分：<tbody id="treatmentlist"> <tr class="itemData"> <td> {{Form::select('treatments[]',$treatments, null, ['class' => 'form-control treatment', 'placeholder' => 'Select treatment' ])}} </td> <td><i class="fas fa-plus-circle" id='addRow'><i class="fas fa-minus-circle" id="delRow"></i></td> </tr></tbody>這是腳本部分：@section('scripts') <script> $(".treatment").select2(); $("#addRow").on('click', function (e) { e.preventDefault(); var $tr = $(this).closest('.itemData'); var $clone = $tr.clone(); $tr.after($clone); $(".treatment").select2(); }); </script>@endsection已經嘗試添加select2('destroy')沒有運氣。任何建議如何使新克隆的行保留 Select2 功能？
2 回答
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
顯然這個問題與 Laravel 布局頁面（app.blade.php）有關。它在調用 bootstrap 時已經加載了 jQuery。所以在 php 中我不需要再次加載 jQuery。
所以修訂app.blade.php：
<!-- Scripts, remove defer from app.js, move selec2.min.js & select2.min.css here -->
<script src="{{ asset('js/app.js') }}"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
...
...
<!- and adding this part -->
@yield('scripts')
在 php 方面，Select2 的更改是：
在 onClick 函數之后，
select2('destroy')首先調用然后克隆包含選擇元素的行
最后使用 . 在最后一個新添加的元素上重新啟用 Select2
select2()。
@section('scripts')
<script>
$(document).ready(function () {
$("#contents").children("td").children("select").select2();
$(document).on('click', '#delRow', function(){
if( $(this).closest('tr').is('tr:only-child') ) {
alert('cannot delete last row');
}
else {
$(this).closest('tr').remove();
}
});
$("#addRow").click(function () {
$("#contents").children("td").children("select").select2("destroy").end();
// add <tr><td> directive first
var newRow = '<tr id="contents"><td id="trx"><td> <i class="fas fa-minus-circle" id="delRow">';
$(newRow).appendTo($("#treatmentlist"));
// append select component on the last tr
$('#treatmentlist tr:last').children("td:first-child").append(
// clone the row and insert it in the DOM
$("#contents").children("td").children("select").first().clone()
);
// enable Select2 on the last newly added element
$('#treatmentlist tr:last').children("td").children("select").select2();
// enable Select2 on the select elements
$("#contents").children("td").children("select").select2();
});
});
</script>
@endsection
在 HTML 中，應用如下更改：
<tbody id="treatmentlist">
<tr id="contents">
<td id="trx">
{{Form::select('treatments[]',$treatments, null, ['class' => 'form-control treatment', 'placeholder' => 'Select treatment' ])}}
</td>
<td>
<i class="fas fa-plus-circle" id='addRow'></td>
</td>
</tr>
</tbody>
阿晨1998
TA貢獻2037條經驗 獲得超6個贊
我不能評論低于 50 的聲譽，希望這個例子對你有所幫助。解釋在這里http://www.phpjavascript.com/2018_03_16_archive.html
$(function () {
$("#addrow").click(function () {
var tr = "<tr>" + "<td contenteditable='true'></td>".
repeat($("#myTable tr:eq(0) td").length) + "</tr>"
$("#myTable").append(tr);
});
$("#addcolumn").click(function () {
$("#myTable tr").append($("<td contenteditable='true'></td>"));
$(document).on('click', '.js-del-row', function () {
$('#myTable').find('tr:last').remove();
});
$(document).on('click', '.js-del-column', function () {
$('#myTable').find('td:last').remove();
});
});
});
- 2 回答
- 0 關注
- 120 瀏覽
添加回答
舉報
0/150
提交
取消