代码之家 › 专栏 › 技术社区 › d.abyss

选择2从本地json文件加载数据

jquery-select2 json javascript

d.abyss · 技术社区 · 8 年前

我已经设置了select2,并使用JS变量加载到数据中,但是由于我的数据有很多选项(国家),我希望从加载它们,而不是在我的JS中。

我创造了一个国家。包含所有国家的json文件,我正在使用下面的代码尝试将它们拉入。但是我得到了错误 The results could not be loaded .

代码:

$('#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 };
                })
            };
        }
    },
});

国家。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 回复 | 直到 8 年前

d.abyss 8 年前

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

不必要的重新处理json文件(仅当您的json文件使用的标识符不同于 "id" 和 "text"
json文件的格式不正确,请参阅 https://select2.org/data-sources/formats

代码:

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

国家。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"
    }
    ]
}

推荐文章

minhson Bui · 更改选择2的高度

2 年前

Slayder Reyes Cuellar · Select2库与自定义js代码冲突

2 年前

JamesF · Select2在Bootstrap Offcanvas内格式不正确

2 年前

Eduard Kolodka · 使用纯JS设置Select2值并触发事件

2 年前

PBrockmann · 如何从分组选项select2中删除重复标记?

2 年前

seme · 格式化JSON结果

4 年前

Sean · ng选项具有预选值时不绑定

8 年前

najmath · 如何访问django中select2的值

8 年前

sksallaj · 使用Google网站转换器插件选择2-超出最大调用堆栈大小

8 年前

Rajesh Samui · 如何使select2只读?

8 年前