Question

以下问题让我很忙，无法弄清楚为什么会这样。

我已经动态创建了一些下拉菜单，这些菜单在创建时应附加从打开页面时静态加载的第一行克隆的选项。但是如果我在第3个或第4个之后创建了多个动态行，那么上一个菜单会被jquery清除？

再次点击创建按钮时，它会再次将选项附加到下拉菜单，但现在前一个下拉菜单被清除。你们中有谁知道如何防止这种情况。

我使用以下代码：

静态数据：

<tr class="">
<td>
    <input type="hidden" name="items[{{ $i }}][id]" value="{{ $item->id }}">
    <p class="text-black">
        <input type="text" name="items[{{ $i }}][name]" class="form-control" autocomplete="off" value="{{ ((old("items.$i.name")) ? old("items.$i.name") : $item->name) }}" placeholder="item" required>
    </p>
    <p class="small hint-text">
        <input type="text" name="items[{{ $i }}][description]" class="form-control" autocomplete="off" value="{{ ((old("items.$i.description")) ? old("items.$i.description") : $item->description) }}" placeholder="description">
    </p>
</td>
<td class="text-center">
    <input type="text" name="items[{{ $i }}][price]" class="form-control autonumeric" autocomplete="off" value="{{ ((old("items.$i.price")) ? old("items.$i.price") : $item->price) }}" placeholder="price" data-a-dec="," data-a-sep="." data-a-sign="&euro; " required>
</td>
<td class="text-center">
    <input type="number" name="items[{{ $i }}][quantity]" class="form-control" autocomplete="off" value="{{ ((old("items.$i.quantity")) ? old("items.$i.quantity") : $item->quantity) }}" placeholder="quantity" min="1" required>
</td>
<td class="text-center">
    <input type="text" name="items[{{ $i }}][discount]" class="form-control" autocomplete="off" value="{{ ((old("items.$i.discount")) ? old("items.$i.discount") : $item->discount) }}" placeholder="discount">
</td>
<td class="text-center">
    <select name="items[{{ $i }}][tax_id]" class="full-width" data-init-plugin="select2" required>
        @foreach ($taxes as $tax)
            <option value="{{ $tax->id }}" @if($item->tax_id == $tax->id) selected @endif>{{ $tax->rate }}%</option>
        @endforeach
    </select>
</td>
<td class="text-right">
    <button type="button" class="btn btn-danger btn-remove-item"><i class="fa fa-times"></i></button>
</td>

动态添加行：

$('.table-items > tbody').append('<tr class=""><td><input type="hidden" name="items[' + increment + '][index]" value="' + increment + '"><p class="text-black"><input type="text" name="items[' + increment + '][name]" class="form-control" autocomplete="off" value="" placeholder="item" required></p><p class="small hint-text"><input type="text" name="items[' + increment + '][description]" class="form-control" autocomplete="off" value="" placeholder="description"></p></td><td class="text-center"><input type="text" name="items[' + increment + '][price]" class="form-control autonumeric" autocomplete="off" value="" placeholder="price" data-a-dec="," data-a-sep="." data-a-sign="&euro; " required></td><td class="text-center"><input type="number" name="items[' + increment + '][quantity]" class="form-control" autocomplete="off" value="1" placeholder="quantity" min="1" required></td><td class="text-center"><input type="text" name="items[' + increment + '][discount]" class="form-control" autocomplete="off" value="" placeholder="discount"></td><td class="text-center"><select name="items[' + increment + '][tax_id]" class="full-width" data-init-plugin="select2" required></select></td><td class="text-right"><button type="button" class="btn btn-danger btn-remove-item"><i class="fa fa-times"></i></button></td></tr>');

执行jQuery追加选项：

var options = $('.table-items > tbody select:first > option').clone(true);

$('select:not(:has(option))').append(options);

jquery在多个添加的行之后从动态创建的内容中删除选项

0 个答案: