Question

我正在使用select2插件，但我很遗憾，它选择了所选的值，而是显示"undefined"

这是我的代码，我使用选择框从查询中提取数据，并搜索数据并带回json响应并填写选择框中的数据：

之前我使用的是隐藏字段，除了显示"undefined to selected value"之外，所有这一切都正常工作，我将其更改为选择的时间，它已被破坏..

这是我的代码：

<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错误：

未捕捉错误：选项＆＃39; ajax＆＃39;附加到元素时不允许使用Select2。

如果您将<select>替换为<input type='hidden' ... />

，则会解决此问题

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

由于您定义了formatValues，因此您在显示选项时设法使用了正确的键。但是你错过了formatSelection，文档说明了这一点：

用于渲染当前选择的函数。

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

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

选择值时，select2显示未定义

1 个答案: