Question

我有一个下拉列表，其中包含一个如下所示的选项列表：

<select id="weightClass" class="form-control input-sm">
     <option value="Default">Please Select</option>
     <option>200</option>
     <option>&lt;200</option>
     <option>&gt;200</option>
     <option>Unknown</option>
</select>

我正在尝试按自定义顺序对它们进行排序，因此看起来像这样：

<select id="weightClass" class="form-control input-sm">
     <option value="Default">Please Select</option>
     <option> <200 </option>
     <option> 200 </option>
     <option> >200 </option>
     <option>Unknown</option>
</select>

基本上安排它，以便首先是小于期权，然后是标准，然后是大于，然后是未知。

这是动态生成的，值可以是任何值，但始终为4，并始终采用该格式。始终包含未知的＆gt;，＆lt;和标准值。

我目前的代码是：

function sortDropDown(target) {
    $(target).html($(target + " option").sort(function (a, b) {
        return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
    }));
}

这显然不起作用，任何想法如何解决这个问题，似乎无法找到关于使用＆gt;进行排序的任何内容。＆LT;包括符号。

Answer 1

提取文本（排除第一个文本），使用排序数组

对文本进行排序和交换

使用HTML

<select id="weightClass" class="form-control input-sm">
    <option value="Default">Please Select</option>
    <option>&lt;200</option>
    <option>&gt;200</option>
    <option>200</option>
    <option>Unknown</option>
</select>

您可以使用此脚本（在上面的HTML之后）

var sortOrder = {
    '<': 1,
    // placeholder for the value
    '>': 3,
    'U': 4
}

function sortDropDown(target) {
    // get text
    var opts = [];
    $(target + " option").each(function (i) {
        if (i)
            opts.push($(this).text())
    });

    opts.sort(function (a, b) {
        // get the sort order using the first character
        var oa = sortOrder[a[0]] || 2;
        var ob = sortOrder[b[0]] || 2;
        if (oa > ob)
            return 1;
        else if (oa < ob)
            return -1;
        else
            return 0;
    });

    // change the option text
    $(target + " option").each(function (i) {
        if (i)
            $(this).text(opts[i - 1])
    });
}

sortDropDown("#weightClass")

＆＃13;

var sortOrder = {
  '<': 1,
  '>': 3,
  'U': 4
}
function sortDropDown(target) {
  var opts = [];
  $(target + " option").each(function (i) {
    if (i)
      opts.push($(this).text())
      });
  console.log(opts)
  opts.sort(function (a, b) {
    var oa = sortOrder[a[0]] || 2;
    var ob = sortOrder[b[0]] || 2;
    if (oa > ob)
      return 1;
    else if (oa < ob)
      return -1;
    else
      return 0;
  });
  $(target + " option").each(function (i) {
    if (i)
      $(this).text(opts[i - 1])
      });
}

sortDropDown("#weightClass")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="weightClass" class="form-control input-sm">
    <option value="Default">Please Select</option>
    <option>&lt;200</option>
    <option>&gt;200</option>
    <option>200</option>
    <option>Unknown</option>
</select>

＆＃13;

Answer 2

您应该使用排序功能来进行所需的特殊排序以下是排序函数以及如何使用它的示例：

var t = ['some other option', '100', '120', '300', '>300', '<300', '<100', '>400', '200', '<200', '>200', 'another special option']
function specialSort(a, b) {
    var newA, newB;
    if (a[0] == '<' || a[0] == '>') {
        newA = parseInt(a.substr(1))
    } else if (!isNaN(a)) {
        newA = parseInt(a)
    } else {
        newA = null;
    }

    if (b[0] == '<' || b[0] == '>') {
        newB = parseInt(b.substr(1))
    } else if (!isNaN(b)) {
        newB = parseInt(b)
    } else {
        newB = null;
    }

    if (newA == null) {
        return 1;
    }
    if (newB == null) {
        return -1;
    }

    if (typeof(newA) == 'number' && typeof(newB) == 'number') {
        if (newA < newB) {
            return -1;
        } else if (newA > newB) {
            return 1;
        } else if (newA == newB) {
            if (a[0] == '<') {
                return -1;
            } else if (b[0] == '<') {
                return 1;
            } else if (a[0] == '>') {
                return 1
            } else if (b[0] == '>' ) {
                return -1;
            }
        }
    }
    return 0;
}
console.log(t.sort(specialSort));
// Output is ["<100", "100", "120", "<200", "200", ">200", "<300", "300", ">300", ">400", "another special option", "some other option"]

您可以使用jQuery获取SELECT标记的值，并使用它来对它们进行排序：

valuesToSort = []
$('#weightClass').find('option').each(function(){r.push($(this).text())})
valuesToSort.sort(specialSort)

现在数组valuesToSort按照您想要的方式排序，您可以将值重新放回#weightClass标记。

如何使用js中的符号对列表进行排序

2 个答案: