title: jquery get data attributes from dynamically generated options
body: <p>I am creating a drop down dynamically after an ajax all and populating the fields. I am also calling jquery.data() to set some attribute which I want in future.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input id="test" type="text" list="mylist"/&gt;
  &lt;datalist id="mylist"&gt;&lt;/datalist&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function() {
  // assume this data is coming from ajax call
  var data = [{
      "name": "John",
      "id": 1
  }, {
      "name": "Jane",
      "id": 2
  }, {
      "name": "Judie",
      "id": 3
  }];
  
  var generateDropDown = function(data) {
      var datalist = $('#mylist');
  
      for (var i = 0; i &lt; data.length; i++) {
          var value = data[i].name + ' =&gt; ' + data[i].id;
          $('&lt;option&gt;', {
                  'class': 'myclass'
              })
              .val(value)
              .data('extra', {
                  'newid': data[i] * 100
              })
              .appendTo(datalist);
      }
  };
  
  generateDropDown(data);
  
   $('.myclass').on('select', function(selected) {
      console.log($(selected).data('extra'));
      console.log($(this).data('extra'));
   });
  });
  </code></pre>
  
  <p>Here is the <a href="https://jsfiddle.net/9yb6km6a/" rel="nofollow">JSFiddle</a></p>
  
  <p>My requirement is to access the selected value from drop down along with the data attribute i have added. How can I do that ?</p>
  
  <p>I tried the 2 console.log options as mentioned above but they dont print anything.</p>