使用 jquery 在 select 选项上设置 html5 数据属性

Question

只是想知道是否有人可以告诉我如何将 HTML5 数据元素添加到 jquery 生成的 <select> <option>。我有以下代码，它以编程方式根据 Ajax 查询的结果设置 select 的 <options>。

$request.then(function (data) {
    var p_id = $("[name='property_id']").val() || -1;
    for (var d = 0, l = data.length; d < l; d++) {
       var item = data[d];
       var option = new Option(item.text, item.id, false, (item.id === p_id ? true : false));
       // this doesnt work
       option.data('data-owner_id') = item.owner_id;
       option.data('data-property_id') = item.property_id;
       $element.append(option);
    }
    $element.trigger('change');
});

提前致谢。

Answer 1

.data() 方法将键和值配对。试试这个：

   option.data('owner_id', item.owner_id);
   option.data('property_id', item.property_id);

除此之外，您可以使用.attr() 方法将属性添加到您的选项中。我给大家举个例子。

  option.attr('data-owner_id', item.owner_id);
  option.attr('data-property_id', item.property_id);

已编辑：
由于选项变量不是 jquery 对象，因此您不能像上面的函数那样调用 jquery 方法。另一种选择是使用原生 javascript .setAttribute()。

option.setAttribute('data-owner_id', item.owner_id);
option.setAttribute('data-property_id', item.property_id);

使用 jquery 在 select 选项上设置 html5 数据属性

using jquery to set html5 data attributes on a select option

jquery

html

html5-data