javascript - 按顺序需要选项

Question

我需要按顺序设置seq属性，但如下所示，请帮助我。我正在使用此代码对这些选项进行排序。

$("#Grade").html($("#Grade option").sort(function(a, b) {
  return $(a).attr("seq") == $(b).attr("seq") ? 0 : $(a).attr("seq") < $(b).attr("seq") ? -1 : 1
}))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="domFilter" id="Grade">
  <option value="" disabled="" selected="" seq="-18">Select your option</option>
  <option value="253802" seq="1">I</option>
  <option value="253811" seq="10">X</option>
  <option value="253812" seq="11">XI</option>
  <option value="253813" seq="12">XII</option>
  <option value="253803" seq="2">II</option>
  <option value="253804" seq="3">III</option>
  <option value="253805" seq="4">IV</option>
  <option value="253806" seq="5">V</option>
  <option value="253807" seq="6">VI</option>
  <option value="253808" seq="7">VII</option>
  <option value="253809" seq="8">VIII</option>
  <option value="253810" seq="9">IX</option>
</select>

Answer 1

使用减法，这将自动将您的属性值转换为数字。没有此转换，您将按字符串值排序。

建议的改进：代替（默默地）将列表转换为HTML并将其提供给html方法，请使用detach().appendTo()，它不需要进行HTML转换，但可以处理HTML元素。使用附加的.parent().val("")还可以清除选择，否则将设置为最后一个元素。

$("#Grade option").sort(function (a, b) {
    return $(a).attr("seq") - $(b).attr("seq");
}).detach().appendTo('#Grade').parent().val("");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="domFilter" id="Grade">
        <option value="" disabled="" selected="" seq="-18">Select your option</option>
        <option value="253802" seq="1">I</option>
        <option value="253811" seq="10">X</option>
        <option value="253812" seq="11">XI</option>
        <option value="253813" seq="12">XII</option>
        <option value="253807" seq="6">VI</option>
        <option value="253808" seq="7">VII</option>
        <option value="253809" seq="8">VIII</option>
        <option value="253803" seq="2">II</option>
        <option value="253804" seq="3">III</option>
        <option value="253805" seq="4">IV</option>
        <option value="253806" seq="5">V</option>
        <option value="253810" seq="9">IX</option>
</select>