时间:2018-08-10 18:44:54

标签: javascript jquery jquery-select2

新手在这里 首先,我的英语水平不足以描述我现在面临的问题,因此请考虑在下面查看我的代码

$('#selectOriginAirport, #selectDestinationAirport').select2({
            placeholder: 'Select Airport',
            ajax: {
                url: '{{url('get-airports')}}',
                dataType: 'json',
                delay: 250,
                data: function(params){
                    return { keyword: params.term };
                },
                processResults: function(datas, params) {
                    return {
                        results: $.map(datas.data, function(item) {
                            return {
                                text: item.cityName + ' - '+item.airportName + ' ('+item.airportCode+')',
                                id: item.airportCode+'|'+item.cityName,
                                lat: item.airportLatitude,
                                lon: item.airportLongitude
                            }
                        })
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { 
                // console.log('markup >>> ' + markup);
                return markup; 
            },
            minimumInputLength: 3,
            templateResult: function(data) {
                // console.log('data >>> ' + data);
                if(data.loading) {
                    return data.text;
                }
                var markup = '<p>'+data.text+'</p>';
                return markup;
            },
            templateSelection: function(data) {
                console.log(data);
                if($(this).is('#selectOriginAirport')){
                    console.log('pepaya');
                    $("[name='flightOriginLat']").val(data.lat);
                    $("[name='flightOriginLon']").val(data.lon);
                }
                if($(this).is('#selectDestinationAirport')){
                    console.log('kates');
                    $("[name='flightDestinationLat']").val(data.lat);
                    $("[name='flightDestinationLon']").val(data.lon);
                // }
                return data.airportName || data.text;
            }
        });

首先看一下我通过#selectOriginAirport和selectDestinationAirport触发select2

问题是我需要在templateSelection函数上设置一个条件,但是它不起作用,结果是这2个逻辑都没有执行

那是我需要解决的问题,我希望你能明白我的意思 预先感谢

1 个答案:

答案 0 :(得分:0)

我检查了select2的源代码,看起来select2 确实将容器作为templateSelection选项中的第二个参数传递。这是select2.js中的相关代码段

SingleSelection.prototype.display = function (data, container) {
  var template = this.options.get('templateSelection');
  var escapeMarkup = this.options.get('escapeMarkup');

  return escapeMarkup(template(data, container));
};

使用该代码和JSFiddle的/echo/json作为示例AJAX,我创建了一个有效的代码段: http://jsfiddle.net/shashank2104/ozy16L8s/2/

相关代码:

templateSelection: function(selection,inst) {
   if(inst && inst.length) {
       return inst.attr('id') === 'select2-user-email-address-container' ? selection.email : selection.id;
   }
}

根据容器ID,可以选择适当的属性。希望这会有所帮助。