jquery - select2 在选择值时显示未定义

Question

我正在使用 select2 插件，但我迷失了它确实 select2 所选值，而是显示“未定义”

这是我的代码，我使用选择框从查询中获取数据，还搜索数据并返回 json 响应并将数据填充到选择框中:

以前我使用的是隐藏字段，除了显示“未定义到选定值”之外，一切都正常工作，当我将其更改为选择时，它已损坏..

这是我的代码:

<select data-placeholder="Select a city" name="cities" id="cities" data-rel="selectscity">
      </select>

JS代码

$('[data-rel="selectscity"]').select2({
        placeholderOption: 'first',
        minimumInputLength: 2,
        ajax: {
            dataType: "json",
            url: "getcities.cfm",
             data: function (term, page) {
                return {q: term};
            },
            results: function (data) {
                return {results: data};
            }
        },
        formatResult: formatValues,
        nextSearchTerm: displayCurrentValue,
    });

    function displayCurrentValue(selectedObject, currentSearchTerm) {
        return currentSearchTerm;
    }

    function formatValues(data) {
        return data.city + ' - ' + data.state;
    }

Hete 是我收到的 JSON 响应

[{"state":"Alaska","id":622,"city":"Anaktuvuk Pass"},{"state":"Alaska","id":1141,"city":"Atqasuk"},{"state":"Alaska","id":7176,"city":"Douglas"},{"state":"Alaska","id":8783,"city":"False Pass"},{"state":"Alaska","id":13511,"city":"Kasigluk"},{"state":"Alaska","id":13512,"city":"Kasilof"},{"state":"Alaska","id":17831,"city":"Moose Pass"},{"state":"Alaska","id":27034,"city":"Unalaska"},{"state":"Alaska","id":27984,"city":"Wasilla"},{"state":"Alabama","id":205,"city":"Alabaster"},{"state":"Alabama","id":1014,"city":"Ashford"},{"state":"Alabama","id":1020,"city":"Ashland"},{"state":"Alabama","id":1055,"city":"Ashville"},{"state":"Alabama","id":4291,"city":"Castleberry"},{"state":"Alabama","id":7177,"city":"Douglas"},{"state":"Alabama","id":7724,"city":"East Tallassee"},{"state":"Alabama","id":7748,"city":"Eastaboga"},{"state":"Alabama","id":13172,"city":"Jasper"},{"state":"Alabama","id":13487,"city":"Kansas"},{"state":"Alabama","id":18629,"city":"New Castle"},{"state":"Alabama","id":19409,"city":"Notasulga"},{"state":"Alabama","id":21213,"city":"Pleasant Grove"},{"state":"Alabama","id":24547,"city":"Silas"},{"state":"Alabama","id":26111,"city":"Tallassee"},{"state":"Alabama","id":26366,"city":"Thomaston"},{"state":"Alabama","id":26372,"city":"Thomasville"},{"state":"Arkansas","id":884,"city":"Arkansas City"},{"state":"Arkansas","id":994,"city":"Ash Flat"},{"state":"Arkansas","id":1006,"city":"Ashdown"},{"state":"Arkansas","id":1600,"city":"Bassett"},{"state":"Arkansas","id":4215,"city":"Casa"},{"state":"Arkansas","id":4238,"city":"Cash"},{"state":"Arkansas","id":4258,"city":"Casscoe"},{"state":"Arkansas","id":6459,"city":"Damascus"},{"state":"Arkansas","id":7257,"city":"Drasco"},{"state":"Arkansas","id":7369,"city":"Dumas"},{"state":"Arkansas","id":7971,"city":"El Paso"},{"state":"Arkansas","id":9940,"city":"Gassville"},{"state":"Arkansas","id":11615,"city":"Hasty"},{"state":"Arkansas","id":12175,"city":"Hiwasse"},{"state":"Arkansas","id":13173,"city":"Jasper"},{"state":"Arkansas","id":15224,"city":"Little Rock Air Force Base"},{"state":"Arkansas","id":16627,"city":"Mc Caskill"},{"state":"Arkansas","id":18102,"city":"Mount Pleasant"},{"state":"Arkansas","id":18405,"city":"Nashville"},{"state":"Arkansas","id":21214,"city":"Pleasant Grove"},{"state":"Arkansas","id":21232,"city":"Pleasant Plains"},{"state":"Arkansas","id":21295,"city":"Pocahontas"},{"state":"Arkansas","id":26705,"city":"Traskwood"},{"state":"Arkansas","id":27592,"city":"Wabash"},{"state":"Arkansas","id":27597,"city":"Wabbaseka"},{"state":"Arkansas","id":27942,"city":"Washington"},{"state":"Arizona","id":995,"city":"Ash Fork"},{"state":"Arizona","id":3659,"city":"Bylas"},{"state":"Arizona","id":4217,"city":"Casa Grande"},{"state":"Arizona","id":4240,"city":"Cashion"},{"state":"Arizona","id":7178,"city":"Douglas"},{"state":"Arizona","id":9371,"city":"Fort Thomas"},{"state":"Arizona","id":14291,"city":"Lake Havasu City"},{"state":"Arizona","id":23836,"city":"Sasabe"},{"state":"Arizona","id":26604,"city":"Tonto Basin"},{"state":"California","id":510,"city":"Alturas"},{"state":"California","id":950,"city":"Aromas"},{"state":"California","id":1078,"city":"Atascadero"},{"state":"California","id":1599,"city":"Bass Lake"},{"state":"California","id":2639,"city":"Bolinas"},{"state":"California","id":3720,"city":"Calabasas"},{"state":"California","id":4245,"city":"Casmalia"},{"state":"California","id":4248,"city":"Caspar"},{"state":"California","id":4259,"city":"Cassel"},{"state":"California","id":4271,"city":"Castaic"},{"state":"California","id":4280,"city":"Castella"},{"state":"California","id":4301,"city":"Castro Valley"},{"state":"California","id":4302,"city":"Castroville"},{"state":"California","id":7186,"city":"Douglas City"},{"state":"California","id":7187,"city":"Douglas Flat"},{"state":"California","id":7648,"city":"East Irvine"},{"state":"California","id":8331,"city":"Encinitas"},{"state":"California","id":9938,"city":"Gasquet"},{"state":"California","id":10722,"city":"Grass Valley"},{"state":"California","id":11046,"city":"Guasti"},{"state":"California","id":14227,"city":"Lagunitas"},{"state":"California","id":14445,"city":"Lancaster"},{"state":"California","id":16201,"city":"March Air Reserve Base"},{"state":"California","id":17389,"city":"Milpitas"},{"state":"California","id":17548,"city":"Moccasin"},{"state":"California","id":18122,"city":"Mount Shasta"},{"state":"California","id":18185,"city":"Mountain Pass"},{"state":"California","id":18889,"city":"Newcastle"},{"state":"California","id":18958,"city":"Newport Coast"},{"state":"California","id":19010,"city":"Nicasio"},{"state":"California","id":20465,"city":"Pasadena"},{"state":"California","id":20471,"city":"Paskenta"},{"state":"California","id":20472,"city":"Paso Robles"},{"state":"California","id":21215,"city":"Pleasant Grove"},{"state":"California","id":21218,"city":"Pleasant Hill"},{"state":"California","id":21243,"city":"Pleasanton"},{"state":"California","id":21464,"city":"Port Hueneme Cbc Base"},{"state":"California","id":23557,"city":"Salinas"},{"state":"California","id":23614,"city":"San Andreas"}] 

Answer 1

我不确定你如何让 Select2 与 <select> 一起工作和ajax选项。我已经测试了您粘贴的代码，它引发了以下 JavaScript 错误:

Uncaught Error: Option 'ajax' is not allowed for Select2 when attached to a element.

如果您替换 <select> 即可解决此问题与 <input type='hidden' ... />

现在，给您的undefined问题:您的 json 对象有 state , city和id 。默认情况下，Select2 需要 id和text .

当显示选项时，您已成功使用正确的键，因为您定义了 formatValues 。然而你错过了formatSelection ，文档指出:

Function used to render the current selection.

因此，当 Select2 绑定(bind)到输入时，您应该重新定义此函数，如下所示:

$('[data-rel="selectscity"]').select2({
    placeholderOption: 'first',
    minimumInputLength: 2,
    ajax: {
        dataType: "json",
        url: "tags",
        data: function (term, page) {
            return {q: term};
        },
        results: function (data) {
            return {results: data};
        }
    },
    formatResult: formatValues,
    nextSearchTerm: displayCurrentValue,

    // use this function to display the value that you want
    formatSelection: function(object, container) {
        return object.city;
    }
});