function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Yogeshwar TailorYogeshwar Tailor 

onchange is not working with select2 in lightning component

Hi Trailblazers,

working with select2 multiselect picklist . onselect of any picklist i have to call controller function in lightning. please see below code 
  
<aura:component  implements="flexipage:availableForRecordHome">	
    <!--First Add jQuery and Select2 plugin library from static resource Using ltng:require tag-->  
    <ltng:require 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}"/>
    
    <!--init handler event call "doInit" function on component load and fetch picklist values-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-form-element">  
                            <label for="picklist" style="font-size:medium;"><b>Public Release</b></label> <br/>
                            <select style="width:200px" id="picklist" onchange="{!c.test}" class="select2Class " multiple="multiple" >
                                <option value="All"> All</option>
                                <option value="Yes"> Yes</option>
                                <option value="No"> No</option>
                            </select>
                        </div>

                <div class="slds-form-element">    
                    <button class="slds-button slds-button--brand" onclick="{!c.searchRecord}">Search</button>
                </div>

</aura:component>


//Controller

({

test : function(component,event,helper){
        alert('test');
        
    },

})
onchange is not working ??

Thanks,
Yogesh

 
Raj VakatiRaj Vakati
Use the lightning:select  or lightning:combobox 

Refer ths links

https://rajvakati.com/2018/05/10/usage-of-lightningcombobox/
https://developer.salesforce.com/docs/component-library/bundle/lightning:select/documentation
https://naveendhanaraj.wordpress.com/2017/11/08/display-the-field-based-on-chosen-picklist-value-in-dropdown-by-using-in-lightning-component/
https://www.biswajeetsamal.com/blog/tag/lightningselect/ 
<aura:component>
    <aura:attribute name="status" type="String" default="open"/>
    <aura:handler name="change" value="{!v.status}" action="{!c.handleChange}"/>
    <lightning:select aura:id="select" name="select" label="Opportunity Status" value="{!v.status}">
        <option value="">choose one...</option>
        <option value="open">Open</option>
        <option value="closed">Closed</option>
        <option value="closedwon">Closed Won</option>
    </lightning:select>
    <lightning:button name="selectChange" label="Change" onclick="{!c.changeSelect}"/>
</aura:component>
  
({
    changeSelect: function (cmp, event, helper) {
        //Press button to change the selected option
        cmp.find("select").set("v.value", "closed");
    },
    handleChange: function (cmp, event, helper) {
        //Do something with the change handler
        alert(event.getParam('value'));
    }
})

 
Deepali KulshresthaDeepali Kulshrestha
Hi Yogeshwar,

Try this below code:-
I have done this and it runs fine and change it according to your need.
-------------lightning component-------------
<aura:component  implements="flexipage:availableForRecordHome">
    <!--First Add jQuery and Select2 plugin library from static resource Using ltng:require tag-->
    <ltng:require 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}"/>

    <!--init handler event call "doInit" function on component load and fetch picklist values-->

    <div class="slds-form-element">
        <label for="picklist" style="font-size:medium;"><b>Public Release</b></label> <br/>
        <select style="width:200px" id="picklist" onchange="{!c.test}" class="select2Class " multiple="multiple" >
        <option value="All"> All</option>
        <option value="Yes"> Yes</option>
        <option value="No"> No</option>
        </select>
    </div>

    <div class="slds-form-element">
        <button class="slds-button slds-button--brand" onclick="{!c.searchRecord}">Search</button>
    </div>

</aura:component>

-------------js Controller-----------------
({

test : function(component,event,helper){
        alert('test');

    },

})

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
Yogeshwar TailorYogeshwar Tailor
Hi Raj,

Thanks for immediate answer. But select2 library i have used for multiselect. Since in vf page we can multiselect with ctrl+click. Lightning:select doesn't have multiple option. ui:inputselect is having multiselect attribute but the behaviour is like ctrl+click. 

Hi Deepali,

I tried this code also it's not working. 

Thanks,
Yogesh
Omkar Kumar 16Omkar Kumar 16
I am also facing same issue. Tried multiple ways, but seems something is broken. :(
Yogeshwar TailorYogeshwar Tailor
Hi Omkar,

I have worked same thing in Visualforce Page. And It is working fine there. For better performance of page use javascript remoting.

Please use the below documentation of select2.
https://select2.org/getting-started/basic-usage


Best,
Yogesh