添加刪除動態 select 框不將數據添加到動態輸入

Question

我有此代碼用於添加動態 select 框並為每個框加載 select2 搜索，如下所示：

<script type="text/javascript">
    var attribute_row = <?= $attribute_row; ?>;

    function addAttribute() {
        html = '<tr id="attribute-row' + attribute_row + '">';
        html += '  <td class="text-left"><input type="text" name="product_attribute[' + attribute_row + '][name]" class="attribute-name' + attribute_row + '" value=""><select id="' + attribute_row + '" name="product_attribute[' + attribute_row + '][attribute_id]" class="form-control attributeSelect">';
        html += '  </select></td>';
        html += '  <td><div class="icheck-primary"><input type="checkbox" id="checkboxAttribute' + attribute_row + '" name="product_attribute[' + attribute_row + '][visible_on_product]" value="1"><label for="checkboxAttribute' + attribute_row + '"></label></div></td>';
        html += '  <td><input type="text" name="product_attribute[' + attribute_row + '][text]" value="" placeholder="<?= lang('Product.price'); ?>" class="form-control" /></td>';
        html += '  ';
        html += '  <td><button type="button" onclick="$(\'#attribute-row' + attribute_row + '\').remove();" data-toggle="tooltip" title="<?= lang('Product.removeAttribute'); ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
        html += '</tr>';

        $('#attribute tbody').append(html);
        $(".attributeSelect").select2({
            minimumInputLength: 3,
            theme: 'bootstrap4',
            width: 'auto',
            ajax: {
                url: "url",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        searchTerm: params.term,
                        csrf_token: csfr_token // search term
                    };
                },
                processResults: function (response) {
                    return {
                        results: response
                    };
                },
                cache: true
            }
        }).on("select2:select", function () {
            data = $(".attributeSelect").select2('data')[0];
            id = $('.attributeSelect').attr('id');
            $(".attribute-name" + id).val(data.text);
        });
        attribute_row++;
    }
</script>

在搜索和選擇后的操作（ on select ）結果我需要將 select2 data.text添加到此輸入框中：

<input type="text" name="product_attribute[' + attribute_row + '][name]" class="attribute-name' + attribute_row + '" value="">

我的代碼適用於第一個 select 框並將值添加到第一個輸入框但對於第二個和更多也將數據添加到第一個輸入。

我該如何解決這個問題？

Answer 1

為所有具有該 class 的項目執行此操作時，您總是會獲得第一個 ID：

id = $('.attributeSelect').attr('id');

這就是為什么它總是將結果設置為第一個元素。 您應該獲取接收事件的元素的當前 id。 您可能會從事件 object 中收到它：

$('#mySelect2').on('select2:select', function (e) {
    console.log(e);
});