Select2 和 Jexcel 向下拉列表添加新选项答案

【问题标题】：Select2 and Jexcel add new option to dropdownSelect2 和 Jexcel 向下拉列表添加新选项
【发布时间】：2020-09-16 10:46:38
【问题描述】：

我有这个带有 Select2 的 Jexel 代码，我从数组中加载每个 jexcel 行的默认值，并使用 select2 作为下拉菜单： https://jsfiddle.net/ktumw528/

但是我想知道如何使用 var 数据中的值填充 select2 中的选项？另外，如果键入时未找到，如何将新国家/地区添加到 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 ]
});

欢迎任何提示:) 非常感谢！

【问题讨论】：

标签： javascript jquery jquery-select2 jquery-select2-4 jexceljs

【解决方案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 上使用外部源，并在此变量上添加新项目。因为编辑器只在打开的单元格上创建。

【讨论】：