无法更新x可编辑的select2选项

Question

我有2个选择选项。更新how_heard_cat_id时，我想更改marketing_event_id的select2选项。

<strong>Referral Source:</strong>
<a href="#" id="how_heard_cat_id" class="edit_me" data-type="select" data-value="<?php echo $invoice->data()->how_heard_cat_id; ?>" data-placement="right" data-original-title="Please enter the invoice referral source."></a>

<strong>Promotion Code:</strong> <a href="#" id="marketing_event_id" class="edit_me" data-value="<?php echo $invoice->data()->marketing_event_id; ?>" data-placement="right" data-original-title="Please enter the invoice promotion code." data-type="select2">
<?php echo $invoice->data()->promo_code; ?></a>

默认情况下，marketing_event_id选项的填充如下：

            //get the promo codes for the select2 box for xeditable. 
        var promo_codes = [];

        $.getJSON('ajax_get_json.php?what=location_promo_codes_by_type', {
                type_id: $('#how_heard_cat_id').attr('data-value')
            },
            function(data) {

                $.each(data, function(index) {
                    promo_codes.push({
                        id: data[index].value,
                        text: data[index].text
                    });
                });

            });


        $('#marketing_event_id').editable({
            emptytext: ".....",
            pk: <?php echo $invoice_id; ?>,
            url: "ajax_xeditable_update.php?table=invoices",
            source: promo_codes,
            select2: {
                width: 200,
                placeholder: 'Select promotion code...',
                allowClear: true
            }
        });

以下是how_heard_cat_id的代码：

$('#how_heard_cat_id').editable({
            emptytext: ".....",
            prepend: "",
            source: "ajax_get_json.php?what=howheard",
            pk: "<?php echo $invoice_id; ?>",
            url: "ajax_xeditable_update.php?table=invoices",
            success: function(response, newValue) {

                //get the promo codes for the select2 box for xeditable. 
                var promo_codes_updated = [];
                $.ajax({
                    dataType: "json",
                    url: "ajax_get_json.php?what=location_promo_codes_by_type",
                    data: {
                        type_id: newValue
                    },
                    success: function(data_updated) {


                        //if there are promo codes once change how heard, then re-create editable with those options
                        if(data_updated.length !== 0) {

                            $.each(data_updated, function(index) {
                                promo_codes_updated.push({
                                    id: data_updated[index].value,
                                    text: data_updated[index].text
                                });
                            });

                        } else {
                            promo_codes_updated = [];
                        }

                            $('#marketing_event_id').editable("destroy");

                            $('#marketing_event_id').editable({
                                emptytext: ".....",
                                pk: "<?php echo $invoice_id; ?>",
                                url: "ajax_xeditable_update.php?table=invoices",
                                source: promo_codes_updated,
                                select2: {
                                    width: 200,
                                    placeholder: 'Select promotion code...',
                                    allowClear: true
                                }
                            });

                            $('#marketing_event_id').editable('toggleDisabled');


                    }

                });

            }
        });

默认值可以正常工作，并且可以通过x-editable加载。当要更改how_heard_cat_id时，新的营销促销代码已加载到我的网络标签中，但是我没有更新marketing_event_id！

基于脚本中的destroy函数，出现控制台错误。

Uncaught TypeError: Cannot read property 'data' of undefined

有什么想法吗？我的想法是完全销毁marketing_event_id可编辑，并在how_heard_cat_id更改时重新创建它。