避免使用jQuery在同一表中重复数据

Question

我有一个表，该表中的数据将根据选择选项进行附加，问题是我想避免多次附加数据。

想象一下，我选择了选项color数据附加，然后我选择了选项size数据附加到目前为止一切顺利。

但是，如果我还是再次错误地选择了color，就选择<{1}}。它再次显示彩色数据，直到我要在后端发送这些数据的那一刻基本上没有问题，很难过滤具有不同值的相同ID。

问题是

有没有避免这种重复的追加？因此，当我选择color一次数据只显示一次而第二次数据不显示吗？

代码

HTML

<div class="mt-20 options" style="display:none">
    <div class="mb-20"><h4>Check mark your needed options only</h4></div>
    <table id="table" class="table table-bordered table-hover table-responsive">
        <thead>
            <th width="50" class="text-center">Check</th>
            <th class="text-center">Title</th>
            <th class="text-center">Price</th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

JavaScript

<script>
    $(function(){
        $('select[name="options"]').on('change', function() {
            var addressID = $(this).val();
            if(addressID) {
                $.ajax({
                    url: '{{ url('admin/getoptions') }}/'+encodeURI(addressID),
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        // $('div.options').empty();



                        // 2. Loop through all entries
                        var keys = ['title'];
                        data.forEach(function(row) {
                          var $row = $('<tr />');

                          $row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkbox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row['id']+'"></span></label></td>');
                          keys.forEach(function(key) {
                            $row.append('<td>' + row[key] + '</td>');
                          });
                          $row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');

                          $('#table tbody').append($row);
                        });
                        $("div.options").show();
                    }
                });
            }else{
                $('div.options').empty();
            }
        });
    });
</script>

有什么想法吗？

Answer 1

当然。您可以创建一个开头为空的数组：

var addresses = [];

无论何时请求地址，都将其存储在数组中，例如

addresses.push(addressID);

并更改if以检查addressID是否正确且尚未请求，例如：

if (addressID && (addresses.indexOf(addressID) < 0)) {

完整代码：

<script>
    $(function(){
        var addresses = [];
        $('select[name="options"]').on('change', function() {
            var addressID = $(this).val();
            if (addresses.indexOf(addressID) < 0) {
            if(addressID) {
                addresses.push(addressID);
                $.ajax({
                    url: '{{ url('admin/getoptions') }}/'+encodeURI(addressID),
                    type: "GET",
                    dataType: "json",
                    success:function(data) {
                        // $('div.options').empty();



                        // 2. Loop through all entries
                        var keys = ['title'];
                        data.forEach(function(row) {
                          var $row = $('<tr />');

                          $row.append('<td class="text-center" width="50"><label class="switch switch-small"><input type="checkbox" /><span><input class="form-control" type="text" name="optionID[]" value="'+row['id']+'"></span></label></td>');
                          keys.forEach(function(key) {
                            $row.append('<td>' + row[key] + '</td>');
                          });
                          $row.append('<td class="text-center"><input class="form-control" placeholder="if fill this price, the price will add to product price when user select it." type="number" name="optionPRICE[]"></td>');

                          $('#table tbody').append($row);
                        });
                        $("div.options").show();
                    }
                });
            }else{
                $('div.options').empty();
            }
            }
        });
    });
</script>