Hi,
we have create pick list with serach functioanlity using select2 Jquery plug in. we are using html select to create picklist and it has onchange event.
With Select2 JQuery plugin onchange event is not firing.

Component:
<aura:component controller="DCOM_distributor_Picklist_Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:actionOverride,forceCommunity:availableForAllPageTypes">
    <ltng:require aura:id="select2" styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 ,  
                           $Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="regionID" type="String" />
    <aura:attribute name="distributorID" type="String" />
    <aura:attribute name="picklistValues" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
    <lightning:layoutItem flexibility="auto"> <!-- padding="around-small" -->
        <div class="custom-box">
            Distributor<span class="red slds-p-right_xx-small slds-p-left_xx-small">*</span>:
            <select style="width:70%;height:16px;" aura:id="picklist" class="select2Class" onchange="{!c.onChangeDistributor}">
                
                <aura:iteration items="{!v.picklistValues}" var="item">
                    <option value="{!item.value}"> {!item.label} </option>
                </aura:iteration>     
            </select>
            <!-- <lightning:select value="{!v.distributorID}">       
                <option value="">Choose one...</option>
                <aura:iteration items="{!v.picklistValues}" var="item">
                     <option text="{!item.label}" value="{!item.value}" selected="{item.selected}"/>                       
                    
                </aura:iteration>
            </lightning:select> -->
        </div>
    </lightning:layoutItem> 
</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        
        helper.onloadMethod(component,component.get("v.regionID") );
        
    },
    onChangeDistributor : function(component, event, helper) {
      alert('test');
    },
    scriptsLoaded : function(component, event, helper) {
        console.log('load successfully');
       // active/call select2 plugin function after load jQuery and select2 plugin successfully    
       $(".select2Class").select2({
           placeholder: "Select branch"
       });
    }
})
On pick list selection onchange event should fir and call onChangeDistributor method. But it is not calling. if I comment ltng:require onchage event is getting fired.
Any idea on why it is not wokring onchange event with select2 library.

Thanks in advance
Praveen

Hi,
we have create pick list with serach functioanlity using select2 Jquery plug in. we are using html select to create picklist and it has onchange event.
With Select2 JQuery plugin onchange event is not firing.

Component:
<aura:component controller="DCOM_distributor_Picklist_Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:actionOverride,forceCommunity:availableForAllPageTypes">
    <ltng:require aura:id="select2" styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 ,  
                           $Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="regionID" type="String" />
    <aura:attribute name="distributorID" type="String" />
    <aura:attribute name="picklistValues" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
    <lightning:layoutItem flexibility="auto"> <!-- padding="around-small" -->
        <div class="custom-box">
            Distributor<span class="red slds-p-right_xx-small slds-p-left_xx-small">*</span>:
            <select style="width:70%;height:16px;" aura:id="picklist" class="select2Class" onchange="{!c.onChangeDistributor}">
                
                <aura:iteration items="{!v.picklistValues}" var="item">
                    <option value="{!item.value}"> {!item.label} </option>
                </aura:iteration>     
            </select>
            <!-- <lightning:select value="{!v.distributorID}">       
                <option value="">Choose one...</option>
                <aura:iteration items="{!v.picklistValues}" var="item">
                     <option text="{!item.label}" value="{!item.value}" selected="{item.selected}"/>                       
                    
                </aura:iteration>
            </lightning:select> -->
        </div>
    </lightning:layoutItem> 
</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        
        helper.onloadMethod(component,component.get("v.regionID") );
        
    },
    onChangeDistributor : function(component, event, helper) {
      alert('test');
    },
    scriptsLoaded : function(component, event, helper) {
        console.log('load successfully');
       // active/call select2 plugin function after load jQuery and select2 plugin successfully    
       $(".select2Class").select2({
           placeholder: "Select branch"
       });
    }
})
On pick list selection onchange event should fir and call onChangeDistributor method. But it is not calling. if I comment ltng:require onchage event is getting fired.
Any idea on why it is not wokring onchange event with select2 library.

Thanks in advance
Praveen