How to get data-value of selected option on select change in jquery

Question

My html syntax is as below

<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");
});

Here I am not able to get the data-value in jquery, How should I get that?

Carapace

Possible duplicate of How to get the data-id attribute? – Ashtray

Did you mean selected item's data-value? – Sirkin

Possible duplicate of On select change, get data attribute value – Chemosh

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

Answer 1

Use

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

Try

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

Bucovina

Answer 2

jQuery has a built in data to do what you want:

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

However, you must find the selected option FIRST, then get its 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>

Chemosh

Answer 3

The this refer to #category that hasn't any data-value attribute. You should find selected option in it.

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

Conglomeration

Answer 4

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

Use $('option:selected', this).attr('data-value'); or $('option:selected', this).data('value'); to access attributes from selected option

Gunshot

Answer 5

This is the HTML

    <select class="form-control" type="text" onchange="set_bank_branches(this)" id="payment_bank_name" name="payment_bank_name" value="">
<option value=""></option>
<option value="ADB" data-min="16" data-max="16">AGRICULTURAL DEVELOPMENT BANK</option>
<option value="ACC" data-min="13" data-max="13">ACCESS BANK</option>
<option value="BOA" data-min="11" data-max="11">BANK OF AFRICA</option>
</select>

This is the Javascript function that gets the data on the option

function set_bank_branches(x)
{

    // This is where I get the data on the option selected
    var minlength= $(x).find(":selected").attr("data-min");
    var maxlength= $(x).find(":selected").attr("data-min");
    alert("maxlength: " + maxlength + " -- minlength: " + minlength);

}

Philipp