Как получить значение данных выбранной опции при изменении выбора в 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");
});

Здесь я не могу получить data-value в jquery. Как мне это получить?

Answer 1

$(document).ready(function(){
$("#category").change(function () {
   var selectedItem = $(this).val();
   var abc= $('option:selected', this).attr('data-value');
   console.log(abc,selectedItem);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/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>

Используйте $('option:selected', this).attr('data-value'); или $('option:selected', this).data('value'); для доступа к атрибутам из выбранных option

Answer 2

this относится к #category, который не имеет атрибута data-value.Вы должны найти выбранный вариант в нем.

$(this).find(":selected").attr("data-value");
// Or
$(":selected", this).attr("data-value");

$("#category").change(function () {
  var abc = $(":selected", this).data("value");
  console.log(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>

Answer 3

Использование

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>

Answer 4

jQuery имеет встроенный data, чтобы делать то, что вы хотите:

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

Однако вы должны найти выбранную опцию FIRST, а затем получить ее значение.

$("#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>