如何在jquery中选择更改时获取所选选项的数据值

Question

我的 html 语法如下

<select id="category" name="category">
  <option value="0">Please Select</option>
  <option value="50" data-value="akne">ACNE</option>
  <option value="11" data-value="rednessbumps">Redness / Bumps</option>
  <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option>
  <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option>
  <option value="17" data-value="dry-sensitive">Dry Sensitive</option>
</select>

 $("#category").change(function () {
  var selectedItem = $(this).val();
  var abc=$(this).attr("data-value");
});

在这里，我无法在 jquery 中获取 data-value ，我应该如何获取？

原文由 mitesh jain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

利用

var abc = $('option:selected',this).data("value");

尝试

 $("#category").change(function() {
  var selectedItem = $(this).val();
  var abc = $('option:selected',this).data("value");
  alert(abc);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="category" name="category">
  <option value="0">Please Select</option>
  <option value="50" data-value="akne">ACNE</option>
  <option value="11" data-value="rednessbumps">Redness / Bumps</option>
  <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option>
  <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option>
  <option value="17" data-value="dry-sensitive">Dry Sensitive</option>
</select>

原文由 Tamil Selvan C 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

jQuery 有一个内置的 data 来做你想做的事：

 var abc = $(this).data('value')

但是，您必须首先找到所选选项，然后获取其值。

 $("#category").change(function () {
   var selectedItem = $(this).val();
   var abc=$(this).find(':selected').data("value");
   console.log(abc)
  });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="category" name="category">
  <option value="0">Please Select</option>
  <option value="50" data-value="akne">ACNE</option>
  <option value="11" data-value="rednessbumps">Redness / Bumps</option>
  <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option>
  <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option>
  <option value="17" data-value="dry-sensitive">Dry Sensitive</option>
</select>

原文由 Unamata Sanatarai 发布，翻译遵循 CC BY-SA 4.0 许可协议