Getting selected item from ul li jquery

8
votes

Hi I am poulating a list in ul - li HTML tag dynamically. All I need is to get value of selected li of corresponding ul. I tried all possible jquery methods I got but still i am getting undefined.I am populating ul - li as:

jQuery.get(url, function(data) {        
        for(i=0;i<data.length;i++){
            //console.log(data[i])  //"+data[i]+"
            msg = "<li> <a href=#>"+data[i]+"</a></li>";
            document.querySelector('#option1').innerHTML +=  msg;
        }           
    });

HTML section is as: 

<body>  
 <div class="wrap">    
 <div class="content">
 <div class="cate-map">
    <ul id="option1" onclick="doSelection()">       
    </ul>       
  </div>
  </div>    
  <div class="content2">
  <div class="cate-map">
    <ul id="option2">       
    </ul>       
  </div>
 </div>
<div class="clear"></div>    
<div class="content3">  <textarea id="content4"></textarea>    
</div>    
</div>
</body>

onclick method is as :

function doSelection(){
    var id = $('#option1 li.selected').attr('value');
    alert(id);      
}

Problem is that I am getting 'undefined' for id value.

UPDATE

As you all suggested I changed my code as:

Populating ul as:

jQuery.get(url, function(data) {
        for(i=0;i<data.length;i++){
            msg = "<li data-input="+data[i]+" class='selected'> <a href=#>"+data[i]+"</a></li>";
            document.querySelector('#option1').innerHTML +=  msg;
        }

    });

HTML ul as:

<div class="cate-map">
    <ul id="option1"  onclick="doSelection()">

    </ul>

    </div>

Onclick function as:

function doSelection(){
    alert($('#option1 li.selected').attr('data-input'));

}

Now I am getting a value as alert but I am getting the first element as alert always. Whichever element I click still always getting the first element of list. Please do help.

3
javascriptjqueryhtml
could u provide the complete html inside ur ul – Outlooker
<li> elements do not have value attributes. – Frédéric Hamidi
Any time you add class selected and a value to the wanted li ? – Ninita
You don't have li that has classname selected. – Leo
@FrédéricHamidi <li> actually has value attribute, if its parent is <ol> w3.org/TR/html-markup/li.html#li.attrs.value off-topic though – Leo

3 Answers

2
votes

As you see in the comment from @Frédéric Hamidi value attribute is not there for li when it is used with ul so better add your own attribute to it then access it like this:

	for(i=0;i<4;i++){// use actual data it is just a demo
        msg = "<li data-input="+i+" class='selected'> <a href=#>"+i+"</a></li>";
        document.querySelector('#option1').innerHTML +=  msg;
    }	

    $('#option1 li').click(function(){
    	//console.log($(this).attr('data-input'));
        alert($(this).attr('data-input'));	// this will alert data-input value.
         
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">

<div class="content">
 <div class="cate-map">
    <ul id="option1">

    </ul>

    </div>
</div>

<div class="content2">
 <div class="cate-map">
    <ul id="option2">

    </ul>

    </div>
</div>
<div class="clear"></div>

<div class="content3">  <textarea id="content4"></textarea>
2
votes

You need add selected class to any li element. Check it out:

msg = "<li class="selected"> <a href=#>"+data[i]+"</a></li>";

And get the content of anchor tag:

function doSelection(){
    var id = $('ul#option1 > li.selected a').text();
    alert(id);

}
1
votes

This will help you. You can use jquery method for handling selection event.

 $("#option1 li").click(function() {
     alert($(this).html());
 });