避免使用jQuery在同一表中重复数据 [英] Avoiding duplicated data in same table with jquery

问题描述

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

I have a table which the data of it will append based on selecting options, the issue is i want to avoid appending data multiple times.

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

Imagine i select option color data appends then I select option size data appends as well so far so good.

但是如果我再次选择color，则选择是否犯错误.它再次显示彩色数据，直到我要在后端发送这些数据的那一刻基本上没有问题，这时很难过滤具有不同值的相同ID.

But if again I select color by mistake or not. It shows color data again, this basically no have issue till the moment that I want to send those data in back-end, that time filtering same id's with different values is hard.

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

Is there anyway to avoid this duplicated appends? So when I select color once data show only once and second time not show?

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>

有什么想法吗?

推荐答案

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

Of course. You can create an array which is empty at the start:

var addresses = [];

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

whenever you have requested for an address, store it inside the array, like

addresses.push(addressID);

并更改if以检查addressID是否为真且尚未请求，例如:

and change the if to check whether addressID is truey and not yet requested, like:

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>

这篇关于避免使用jQuery在同一表中重复数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！