时间戳

首页 > 解决方案 > 将数据属性添加到选项

jquery - 将数据属性添加到选项

问题描述

我有这个代码：

$.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);

    }
  }
});

但这条线不起作用：

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

如何将courierTarif数据属性添加到<option>？

标签： jquery

解决方案

您使用了错误的选择。

代替：

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

和：

$('.courier option')

现在你的last()选择器工作了。

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

您可以使用替代方案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>

推荐阅读