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
Sylvain DEVOSSylvain DEVOS 

Get value of <li> with onclick

Hello everybody.

I wish to get the value of a parameter on a tag <li> but I d'ont know how to make.
I tried with "event.getsource" or "event.target.value" but unsuccessfully.

Can you help me.


Component 
<aura:component controller="MEIKO_99_Account_Search_Controller">   
    
    <lightning:button name="myButton" onclick="{!c.Select}"/>
    
    <!-- CREATE ATTRIBUTE/VARIABLE-->
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
    <aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>    
    
    <div style="height: 15rem;">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <div class="slds-combobox_container">
                    <div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aria-expanded="false" aria-haspopup="listbox" role="combobox">
                        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
                            <lightning:input name="Input_SearchText"
                                             label="Compte Client"
                                             value="{!v.searchKeyword}"
                                             placeholder="Search..."
                                             class="slds-input slds-combobox__input"
                                             onchange="{!c.Search}" />
                        </div>
                        <div id="listbox-id-1" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid" role="listbox">
                            <ul class="slds-listbox slds-listbox_vertical" role="presentation" id="AccountList">
                                <aura:iteration items="{!v.searchResult}" var="acc" indexVar="count">
                                    <li role="presentation" class="slds-listbox__item" onclick="{!c.Select}" name="test">
                                        <div id="{!'Option' + count + 1}" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
                                            <span class="slds-media__figure">
                                                <span class="slds-icon_container slds-icon-standard-account">
                                                    <lightning:icon iconName="standard:account" size="x-small" alternative-text="Account"/>
                                                </span>
                                            </span>
                                            <span class="slds-media__body" >
                                                <span class="slds-listbox__option-text slds-listbox__option-text_entity">{!acc.Name}</span>
                                                <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • {!acc.Phone}</span>
                                            </span>
                                        </div>
                                    </li>
                                </aura:iteration>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

​Controller 
Select: function(component, event, helper) {
        var value = event.target.value;
        //event.getSource().get("v.name")
        alert(value);
    }

 
Soyab HussainSoyab Hussain
Hi Sylvain DEVOS,

As we know we don't have any attribute "value" in HTML li.
so you will need to use a custom attribute name data-value in your li, here is the code snippet that you can refer to.

Component: 
<li role="presentation" class="slds-listbox__item" onclick="{!c.Select}"  data-value="{!acc.Id}" name="test">

JS: 
({
    Select : function(component, event, helper) {
        alert('selected record: ', event.currentTarget.dataset.value);
    }
})

Regards,
Soyab
sachinarorasfsachinarorasf
Hi,

I have gone through your problem.

Here is the code you can use and update as per your requirements.
 
Component:-code

<ul >
    <aura:iteration items="{!v.searchResult}" var="acc">
        <li  name="{!acc.Name+',' +acc.Email+','+'Contact'}" onclick="{!c.onclick}">
            {!acc.Name}
        </li>
    </aura:iteration>
</ul>

Controller:

onclick: function (c, e, h) {
    var select = (e.currentTarget.name).split(",");
    console.log('select-->'+select);
}

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

Thanks and Regards,
Sachin Arora
Agboola DamilolaAgboola Damilola
Hi, I don't know much, But someone was able to fix something similar to this.


He has lines of React component which looks like this: 
class Answers extends React.Component {
    constructor(props) {
        super(props);
    }
    
    handleCheck(e) {
        alert(e.target);
    }
    
    render() {
        return (
            <div id="answers">
                <ul>
                    <li onClick={this.handleCheck}><span>A</span> <p>{this.props.answers[0]}</p></li>
                    <li onClick={this.handleCheck}><span>B</span> <p>{this.props.answers[1]}</p></li>
                    <li onClick={this.handleCheck}><span>C</span> <p>{this.props.answers[2]}</p></li>
                    <li onClick={this.handleCheck}><span>D</span> <p>{this.props.answers[3]}</p></li>
                </ul>
            </div>
        );
    }
}

Here is how he eventually solved it. He added for each li’s a data-id attribute and binding the handle check method to this. 
<li onClick={this.handleCheck.bind(this)} data-id="1"><span>A</span> <p>{this.props.answers[0]}</p></li>
<li onClick={this.handleCheck.bind(this)} data-id="2"><span>B</span> <p>{this.props.answers[1]}</p></li>
<li onClick={this.handleCheck.bind(this)} data-id="3"><span>C</span> <p>{this.props.answers[2]}</p></li>
<li onClick={this.handleCheck.bind(this)} data-id="4"><span>D</span> <p>{this.props.answers[3]}</p></li>
I blog (https://extendguide.com/)
And then in handle check, He will get the element with:
handleCheck(e) {
   e.currentTarget.dataset.id 
}

Please check this link: https://forum.freecodecamp.org/t/react-onclick-get-li-clicked-solved/68112/3