title: jQuery: How to get value of a particular data attribute from selected datalist (html5) option?
body: <p>html:</p>
  
  <pre><code>&lt;input list="items" id="item"&gt;
  
  &lt;datalist id="items"&gt;
    &lt;option value="A item"  data-xyz = "1" &gt;
    &lt;option value="aa item" data-xyz = "2" &gt;
    &lt;option value="C item"  data-xyz = "3" &gt;
    &lt;option value="D item"  data-xyz = "4" &gt;
    &lt;option value="E item"  data-xyz = "5" &gt;
  &lt;/datalist&gt; 
  
  &lt;input type="button" id="button" value="Get xyz" /&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$("#button").click(function(){
         alert($("#items option:selected").attr('data-xyz'));
  });
  </code></pre>
  
  <p><a href="http://jsbin.com/emibeh/1/edit" rel="noreferrer">link to jsbin</a></p>
  
  <p><strong>Query:</strong></p>
  
  <blockquote>
    <p>I just need to access the value of 'data-xyz' from selected datalist
     option on click of "#button" or any event.</p>
    
    <p><em>jQuery version: 1.7.2</em></p>
    
    <p><strong>Thanks.</strong></p>
  </blockquote>