title: Getting selected item from ul li jquery
body: <p>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:</p>
  
  <pre><code>jQuery.get(url, function(data) {        
          for(i=0;i&lt;data.length;i++){
              //console.log(data[i])  //"+data[i]+"
              msg = "&lt;li&gt; &lt;a href=#&gt;"+data[i]+"&lt;/a&gt;&lt;/li&gt;";
              document.querySelector('#option1').innerHTML +=  msg;
          }           
      });
  </code></pre>
  
  <p>HTML section is as:  </p>
  
  <pre><code>&lt;body&gt;  
   &lt;div class="wrap"&gt;    
   &lt;div class="content"&gt;
   &lt;div class="cate-map"&gt;
      &lt;ul id="option1" onclick="doSelection()"&gt;       
      &lt;/ul&gt;       
    &lt;/div&gt;
    &lt;/div&gt;    
    &lt;div class="content2"&gt;
    &lt;div class="cate-map"&gt;
      &lt;ul id="option2"&gt;       
      &lt;/ul&gt;       
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;    
  &lt;div class="content3"&gt;  &lt;textarea id="content4"&gt;&lt;/textarea&gt;    
  &lt;/div&gt;    
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>onclick method is as :</p>
  
  <pre><code>function doSelection(){
      var id = $('#option1 li.selected').attr('value');
      alert(id);      
  }
  </code></pre>
  
  <p>Problem is that I am getting 'undefined' for id value.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>As you all suggested I changed my code as:</p>
  
  <p>Populating ul as:</p>
  
  <pre><code>jQuery.get(url, function(data) {
          for(i=0;i&lt;data.length;i++){
              msg = "&lt;li data-input="+data[i]+" class='selected'&gt; &lt;a href=#&gt;"+data[i]+"&lt;/a&gt;&lt;/li&gt;";
              document.querySelector('#option1').innerHTML +=  msg;
          }
  
      });
  </code></pre>
  
  <p>HTML ul as:</p>
  
  <pre><code>&lt;div class="cate-map"&gt;
      &lt;ul id="option1"  onclick="doSelection()"&gt;
  
      &lt;/ul&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Onclick function as:</p>
  
  <pre><code>function doSelection(){
      alert($('#option1 li.selected').attr('data-input'));
  
  }
  </code></pre>
  
  <p>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.</p>