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

Posted 2023-02-18

【中文标题】如何在 jQuery 中对选择选项进行排序以同时尊重每个选项数据属性？

【英文标题】：How can I sort select options in jQuery to also respect each options data attributes?

【发布时间】：2021-12-19 12:39:19

【问题描述】：

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

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

【参考方案1】：

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

使用data()方法更新数据不影响属性 DOM。要设置 data-* 属性值，请使用 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>

【讨论】：

完美运行，谢谢。看起来我有点过于复杂了:)