时间戳

首页 > 解决方案 > 如何在 jQuery 中对选择选项进行排序以同时尊重每个选项数据属性？

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

问题描述

我有一个 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);
        });
    }

标签： jqueryhtml-select

解决方案

该代码部分工作。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));
  });
};

jQueryappend再次选择父选项基本上将其移到最后，为每个选项执行此操作并对其进行排序。

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>

推荐阅读