如何对 jQuery 中的 select 选项进行排序以同时尊重每个选项数据属性？

Question

我有一个 jQuery 排序函数来对 select 选项进行排序，但它似乎没有更新每个选项数据属性。我不知道为什么不。我该如何解决这个问题？（我认为我的函数可能会使用旧值或动态更新数组值，不确定）

sortSelectOptions: function (options){
        var arr = options.map(function (_, o) {
            var val = o.value;
            var datafields = $(o).data();

            return {t: $(o).text(), v: val, d:datafields,s:$(o).is(':selected')};
        }).get();
        arr.sort(function (o1, o2) {
           return o1.t > o2.t ? 1 : o1.t < o2.t ? -1 : 0;
        });
        options.each(function (i, o) {
            o.value = arr[i].v;
            $(o).text(arr[i].t);
            $(o).data(arr[i].d);
            $(o).prop("selected",arr[i].s);
        });
    }

Answer 1

代码部分有效。 data 实际上被复制到其他 option 标签。当您检查元素以查找 data-* 属性时，它们是不可见的。

Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.

不工作的部分是您将 data 添加到 option 标签，如果目标 option 有其他名称的现有数据，它们将不会被删除.

有一种更简单的方法可以对这些选项标签进行排序，而不是更改它们，您可以移动它们。

function sortSelectOptions(options) {
  options.sort((a, b) => $(a).text().localeCompare($(b).text()));
  options.each((index, option) => {
    $(option).parent().append($(option));
  });
};

jQuery append 父项的选项基本上将它移到最后，对每个选项都这样做，然后对它们进行排序。

const sortSelectOptions = (options) => {
  options.sort((a, b) => $(a).text().localeCompare($(b).text()));
  options.each((index, option) => {
    $(option).parent().append($(option));
  });
};

$(document).ready(function() {
  sortSelectOptions($('option'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option data-a="a">B</option>
  <option data-a="b" data-c="ac">A</option>
  <option data-a="x" data-c="v">C</option>
</select>

如何对 jQuery 中的 select 选项进行排序以同时尊重每个选项数据属性？

How can I sort select options in jQuery to also respect each options data attributes?

jquery

html-select