Select2 и Jexcel добавляют новую опцию в раскрывающийся список

Question

У меня есть этот код Jexel с Select2, где я загружаю значения по умолчанию для каждой строки jexcel из массива и использую select2 для раскрывающегося списка:https://jsfiddle.net/ktumw528/

Однако я хочу знать, как я могу заполнить параметры из select2 значениями из данных var? Также как я могу добавить новую страну в раскрывающийся список select2, если она не найдена при вводе.

var data = [
    ['Spain'],
    ['France'],
    ['Germany'],
];

var customDropDown1 = {
    // Methods
    closeEditor : function(cell, save) {
        // Get value
        var txt = $(cell).find('.editor').val();

        // Set visual value
        $(cell).html(txt);

        // Close edition
        $(cell).removeClass('edition');

        // Save history
        return txt;
    },
    openEditor : function(cell) {
        // Get current content
        var currentValue = $(cell).text();

        // Create the editor
        var editor = document.createElement('select');
        $(cell).html(editor);
        $(editor).prop('class', 'editor');
        $(editor).html('<option>Brazil</option><option>Canada</option>')
        $(editor).val(currentValue);
        // Create the instance of the plugin
        $(editor).select2().on('select2-blur', function() {
            $('#' + $.fn.jexcel.current).jexcel('closeEditor', $(cell), true);
        });
    },

    getValue : function(cell) {
        return $(cell).text();
    },
    setValue : function(cell, value) {
        $(cell).html(value);

        return true;
    }
}

$('#my').jexcel({
    data:data,
    columns: [ { editor:customDropDown1 } ],
    colHeaders: ['Country'],
    colWidths: [ 300 ]
});

Любые советы приветствуются:) большое спасибо!

Answer 1

Думаю, вы можете использовать последнюю версию JExcel (v4). У вас будет больше опций и больше опций редактора.

В этой новой версии вы можете создать редактор с заданным пользовательским значением. И у вас есть возможность раскрывающегося списка для добавления нового элемента https://bossanova.uk/jexcel/v4/examples/dropdown-and-autocomplete

и эта документация: https://bossanova.uk/jsuites/dropdown-and-autocomplete/new-options

Пример:

<script>
var data5 = [
    [1, 'Beatles'],
    [2, 'Beatles'],
    [3, 'Beatles'],
    [4, 'Beatles'],
];
 
jexcel(document.getElementById('spreadsheet5'), {
    data: data5,
    columns: [
        {
            type: 'dropdown',
            title: 'Name',
            width: '300px',
            source: [
                { id:'1', name:'Paul' },
                { id:'2', name:'Ringo' },
                { id:'3', name:'George' },
                { id:'4', name:'John' },
            ],
            options: { newOptions: true } // Option for add new options
        },
        {
            type:'dropdown',
            title:'Band',
            width:'200px',
            source: ['Beatles'],
        },
    ],
});
<script>

в противном случае, если вы хотите сохранить v2, я предлагаю использовать внешний источник для var и добавить новый элемент в эту переменную. Потому что редактор создается только на открытой ячейке.