Select2从本地json文件加载数据

时间:2017-11-28 10:29:18

标签: javascript json jquery-select2

我已经设置了select2并使用JS变量来加载数据,但是由于我的数据有很多选项(国家/地区),我想从一个而不是加载它们在我的JS中有这个。

我已经创建了包含其中所有国家/地区的countries.json文件,并且我使用以下代码尝试将其拉入。但是我收到错误The results could not be loaded。< / p>

代码:

$('#allowedCountries').select2({
    placeholder: 'Select allowed countries',
    selectOnClose: false,
    tags: false,
    tokenSeparators: [',', ' '],
    ajax: {
        dataType : "json",
        url      : "includes/countries.json",
        processResults: function (data) {
            return {
                results: $.map(data, function(obj) {
                    return { id: obj.ime, text: obj.ime };
                })
            };
        }
    },
});

countries.json

[{id:1, text: 'Afghanistan'},
{id:2, text: 'Aland Islands'},
{id:3, text: 'Albania'},

...

{id:245, text: 'Yemen'},
{id:246, text: 'Zambia'},
{id:247, text: 'Zimbabwe'}]

1 个答案:

答案 0 :(得分:1)

在@Camille的帮助下找到解决方案。

  1. 不必要地重新处理json文件(仅当您的json文件使用的标识符不同于"id""text"

  2. 时才需要
  3. json文件的格式不正确,请参阅https://select2.org/data-sources/formats

  4. 代码:

    // Create countries dropdown
    $('#allowedCountries').select2({
        placeholder: 'Select allowed countries',
        selectOnClose: false,
        tags: false,
        tokenSeparators: [',', ' '],
        ajax: {
            dataType : "json",
            url      : "includes/countries.json",
        },
    });
    

    countries.json

    {
        "results": [
        {
            "id": 1,
            "text": "Afghanistan"
        },
        {
            "id": 2,
            "text": "Aland Islands"
        },
        {
            "id": 3,
            "text": "Albania"
        },
    
    ...
    
        {
            "id": 245,
            "text": "Yemen"
        },
        {
            "id": 246,
            "text": "Zambia"
        },
        {
            "id": 247,
            "text": "Zimbabwe"
        }
        ]
    }