+ 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.

<aura:component controller="MEIKO_99_Account_Search_Controller">   
    <lightning:button name="myButton" onclick="{!c.Select}"/>
    <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"
                                             class="slds-input slds-combobox__input"
                                             onchange="{!c.Search}" />
                        <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 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>

Select: function(component, event, helper) {
        var value = event.target.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.

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

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


I have gone through your problem.

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

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


onclick: function (c, e, h) {
    var select = (e.currentTarget.name).split(",");

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) {
    handleCheck(e) {
    render() {
        return (
            <div id="answers">
                    <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>

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) {

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