当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Select2 dropdown results are jittery when scroll bar is used

问题描述:

I have the following function

 $("[rel='srm-triage-select-queue']").select2({

placeholder: "Select Queue",

allowClear: true,

data: queueData,

maximumSelectionLength: 1,

formatResult: function (team) {

var piloticon = (this.element.attr("data-piloticon") == "show") ? true : false;

var txicon = (this.element.attr("data-txicon") == "show") ? true : false;

var teamname = team.queue_name;

if (txicon) {

if (team.using_transfer_queue === 1) {

teamname += '<i class="fa fa-fw fa-check-square-o pull-right txt-color-greenLight"></i>';

} else {

teamname += '<i class="fa fa-fw fa-square-o pull-right txt-color-greenLight"></i>';

}

}

if (piloticon) {

if (team.pilot_short !== null && team.pilot_short !== "") {

teamname += '<i class="fa fa-fw fa-phone pull-right txt-color-blueLight"></i>';

}

}

//console.log('queueData: ' + JSON.stringify(queueData, null, 2));

console.log('queueData:');

//Filter teams based on the Triage form selections

// try {

if ($(".triageFRTRadioBtn").is(':checked') &&

(teamname.indexOf("FRT") !== -1 || teamname.indexOf("PWx") !== -1 )) {

console.log('FRTTTTTTTTTTTTT');

return teamname;

} else {

return "";

}

},

initSelection : function (element, callback) {

var data = {id: element.val(), text: element.val()};

callback(data);

},

escapeMarkup: function (m) { return m; }

}).trigger('select2-is-ready');

and this is how i tie this to the HTML:

 <section class="col col-10" style="padding-right: 0px;">

<input rel="srm-triage-select-queue" id="triage_team" class= "triage_team" data-piloticon="show" style="width: 100%;"/>

</section>

The dropdown list get correctly rendered.

However, the problem is that when i use the following code snippet in formatResult() as shown in the above select2, the dropdown results are jittery when scrollbar is used. Looks like Select2 is probably repainting the dropdown maybe, not sure.

 if ($(".triageFRTRadioBtn").is(':checked') &&

(teamname.indexOf("FRT") !== -1 || teamname.indexOf("PWx") !== -1 )) {

console.log('FRTTTTTTTTTTTTT');

return teamname;

} else {

return "";

}

If I do not use the above id..else loop in the formatResult() code, and simply return the following in formatResult(), there is not jittery behavior.

return teamname;

Any thoughts on how to handle this?

分享给朋友:
您可能感兴趣的文章:
随机阅读: