function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
praveen Reddy 186praveen Reddy 186 

Onchage event is not firing on html select when we use select2 JQuery plug in lightning components

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
praveen Reddy 186praveen Reddy 186
Hi,
if any one identified issue please let me know.

Thanks
Praveen
Omkar Kumar 16Omkar Kumar 16
I am also facing same issue. Tried multiple ways, but seems something is broken. :(
Muralikrishna MkMuralikrishna Mk
Hi Praveen,

Even I'm also facing the same issue with the standard HTML tag <select> in the Aura component. onchange event was not firing. 
I did not get any solution.

<div class="slds-form-element">  
                <label class="slds-form-element__label" for="picklist">Region</label> <br/>
                <select style="width:100%" id="picklist" name="selectregionItem" class="select2Class" multiple="multiple" onchange="{!c.handleregionchange}">
                    <aura:iteration items="{!v.regionoptions}" var="opts">
                        <option value="{!opts.value}" selected="{!opts.selected}"> {!opts.label} </option>
                    </aura:iteration>     
                </select>
            </div>

Thanks,
Muralikrishna.