CODEWITHSUNDEEP
jquery
Saint Robson
Saint Robson

Reputation: 5525

Adding Data Attribute To Option

I have this code:

$.ajax({
  url: "ajax-ongkir.php?destination=" + subdistrictId + "&destination_type=subdistrict&weight=" + weight,
  dataType: "JSON",
  success: function(json) {
    for (var i = 0; i < json.length; i++) {

      var courierName = json[i].name;
      var courierService = json[i].service;
      var courierTarif = json[i].tarif;

      $('.courier').append($('<option>', {
        value: courierName + ' ' + courierService + ' ' + courierTarif,
        text: courierName + ' - ' + courierService + ' - ' + courierTarif
      }));

      $('.courier').$('<option>').last().attr('data-tarif', courierTarif);

    }
  }
});

but this line doesn't work:

$('.courier').$('<option>').last().attr('data-tarif', courierTarif);

How to add courierTarif as data attribute into <option>?

Upvotes: 0

Views: 38

Answers (3)

4b0
4b0

Reputation: 22323

You are using wrong selection.

Replace:

 $('.courier').$('<option>')

with:

$('.courier option')

Now your last() selector work. 

$('.courier option').last().attr('dat-tarif', "hi");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="courier">
  <option value="a">1</option>
  <option value="b">2</option>
  <option value="c">3</option>
</select>

Alternative you can use find.

$('.courier').find('option').last().attr('dat-tarif', "hi");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="courier">
  <option value="a">1</option>
  <option value="b">2</option>
  <option value="c">3</option>
</select>

Upvotes: 1

Saint Robson
Saint Robson

Reputation: 5525

This solve my problem.

$('.courier option:last').attr('data-tarif', courierTarif);

Upvotes: 0

Syed mohamed aladeen
Syed mohamed aladeen

Reputation: 6755

you need to try like this.

$('.courier option[value="3"]').attr('data-tarif', "hi");

$('.courier option[value="3"]').attr('data-tarif', "hi");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="courier">
  <option value="1">opt1</option>
  <option value="2">opt2</option>
  <option value="3">opt3</option>
</select>

Upvotes: 0

Related Questions