title: How to get data-value of selected option on select change in jquery
body: <p>My html syntax is as below</p>
  
  <pre><code>&lt;select id="category" name="category"&gt;
    &lt;option value="0"&gt;Please Select&lt;/option&gt;
    &lt;option value="50" data-value="akne"&gt;ACNE&lt;/option&gt;
    &lt;option value="11" data-value="rednessbumps"&gt;Redness / Bumps&lt;/option&gt;
    &lt;option value="15" data-value="sunspotsfreckles"&gt;Sunspots / Freckles&lt;/option&gt;
    &lt;option value="16" data-value="agingwrinkles"&gt;Aging / Wrinkles&lt;/option&gt;
    &lt;option value="17" data-value="dry-sensitive"&gt;Dry Sensitive&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$("#category").change(function () {
    var selectedItem = $(this).val();
    var abc=$(this).attr("data-value");
  });
  </code></pre>
  
  <p>Here I am not able to get the <code>data-value</code> in jquery, How should I get that?</p>