Adding Data Attribute To Option

Question

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>?

4b0 · Accepted Answer · 2019-06-04 06:06:43Z

1

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>

edited Jun 4, 2019 at 6:06

answered Jun 4, 2019 at 4:47

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Syed mohamed aladeen · Accepted Answer · 2019-06-04 04:24:59Z

0

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>

answered Jun 4, 2019 at 4:24

Syed mohamed aladeen

6,8134 gold badges36 silver badges60 bronze badges

Comments

Abhishek Gurjar · Accepted Answer · 2019-06-04 06:01:00Z

0

This solve my problem.

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

edited Jun 4, 2019 at 6:01

Abhishek Gurjar

7,47610 gold badges41 silver badges47 bronze badges

answered Jun 4, 2019 at 4:24

Saint Robson

5,53518 gold badges74 silver badges121 bronze badges

Collectives™ on Stack Overflow

Adding Data Attribute To Option

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related