You need to sign in to do that
Don't have an account?
Yogeshwar 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
Thanks,
Yogesh
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
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/
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
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
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