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
Abi V 4Abi V 4 

OnClick Dropdown with Checkbox lightining component

I want to create the dropdown with check and dropdown should be open on click of the button .please let me know how to achive this.
I want something like mentioned below.
User-added image
Sachin Goyal 2Sachin Goyal 2
You can achive this functionaly with the follwing code:
<div id="dropdown" class="slds-dropdown slds-dropdown--left">
            <ul class="slds-dropdown__list" role="menu">
                <aura:iteration items="{!v.items}" var="item">
                    <li class="slds-dropdown__item slds-is-selected" role="presentation" onclick="{!c.handleClick}" aria-selected="true">
                        <a id="{!item}" href="javascript:void(0);" role="menuitemradio" aria-checked="true" tabindex="0" onclick="{!c.select}" >
                            <span id="{!item + 'checked'}" style="display:none !important;width:20px !important;">
                                <c:svg1 ariaHidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small " xlinkHref="/resource/SLDSv2/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </span>
                            <span style="width:100px !important;float: left;">{!item}</span>
                        </a>
                    </li>
                </aura:iteration>    
                
            </ul>
        </div>

Dropdown.cmp
  select : function(cmp, event) {
        var items = cmp.get("v.items");
        var element = document.getElementById("None");
        element.style.display = 'none'; 
        var recId = event.currentTarget.id;
        for(var i=0;i<items.length;i++){
            if(items[i]+'checked' === recId+'checked'){
                document.getElementById(items[i]+'checked').style.display = "block";
            }
            else{
                document.getElementById(items[i]+'checked').style.display = "none";
            }
        }
        
        //set the selected record Id
        cmp.set('v.recordId',recId); 

Hope this will help you.
Please mark it as best answer if your question is solved.
Regards
Abi V 4Abi V 4
Hello
Can i knwo the handleClick function code here
Sachin Goyal 2Sachin Goyal 2
<div aura:id="menulist" class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-hide">
        <button class="slds-button slds-button--neutral slds-picklist__label" aria-haspopup="true" onclick="{!c.handleClick}">
            <span id="None" class="slds-truncate slds-open ">--None--</span>
            <span class="slds-truncate">{!v.recordId}</span>
            <c:svg1 ariaHidden="true" class="slds-icon"
                    xlinkHref="/resource/SLDSv2/assets/icons/utility-sprite/svg/symbols.svg#down" />
        </button>
        <div id="dropdown" class="slds-dropdown slds-dropdown--left">
            <ul class="slds-dropdown__list" role="menu">
                <aura:iteration items="{!v.items}" var="item">
                    <li class="slds-dropdown__item slds-is-selected" role="presentation" onclick="{!c.handleClick}" aria-selected="true">
                        <a id="{!item}" href="javascript:void(0);" role="menuitemradio" aria-checked="true" tabindex="0" onclick="{!c.select}" >
                            <span id="{!item + 'checked'}" style="display:none !important;width:20px !important;">
                                <c:svg1 ariaHidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small " xlinkHref="/resource/SLDSv2/assets/icons/utility-sprite/svg/symbols.svg#check" />
                            </span>
                            <span style="width:100px !important;float: left;">{!item}</span>
                        </a>
                    </li>
                </aura:iteration>    
                
            </ul>
        </div>
    </div>

Dropdown.cmp​

handleClick : function(component, event, helper)
    {
        var menu = component.find("menulist");
        $A.util.toggleClass(menu, "slds-is-open"); 
     
    },