Question

我的html代码动态地如下所示。但是我想基于属性“ datagroupid”进行排序。

<select id="parts" multiple="multiple" class="parameterdropdown">
<optgroup value="9" label="B3_L1" datagroupid="9">
      <option value="12">A01_Process1_Sub1</option>
      <option value="14">A03_Process3_Sub1 </option>
 </optgroup>
<optgroup value="6" label="A2_L2" datagroupid="6">
      <option value="7">A01_Process1_Sub1</option>
      <option value="9">A03_Process3_Sub1 </option>
</optgroup>
 <optgroup value="3" label="A1_L1" datagroupid="3">
      <option value="3">A01_Process1_Sub1</option>
      <option value="4">A03_Process3_Sub1 </option>
</optgroup>
</select>

我尝试了以下脚本。它不起作用。请帮助我。

$("#parts").html($("#parts optgroup").sort(function (a, b) {
     return a.text == b.text ? 0 : a.label < b.label ? -1 : 1  ;
}));

预期输出如下。

<select id="parts" multiple="multiple" class="parameterdropdown">
 <optgroup value="3" label="A1_L1" datagroupid="3">
      <option value="3">A01_Process1_Sub1</option>
      <option value="4">A03_Process3_Sub1 </option>
</optgroup>
<optgroup value="6" label="A2_L2" datagroupid="6">
      <option value="7">A01_Process1_Sub1</option>
      <option value="9">A03_Process3_Sub1 </option>
</optgroup>
<optgroup value="9" label="B3_L1" datagroupid="9">
      <option value="12">A01_Process1_Sub1</option>
      <option value="14">A03_Process3_Sub1 </option>
 </optgroup>
</select>

Answer 1

您只需要将代码更改为此：https://codepen.io/creativedev/pen/QxmaOG

$("#parts").html($("#parts optgroup").sort(function (a, b) {
     return $(a).attr('datagroupid') == $(b).attr('datagroupid') ? 0 : a.label < b.label ? -1 : 1  ;
}));

Answer 2

由于sort函数的参数是本机DOM元素，而不是jQuery对象，因此，如果不打算首先将其转换为jQuery对象，则必须使用标准的JS方法：

$("#parts").html($("#parts optgroup").sort(
  (a, b) => a.textContent === b.textContent || b.label < a.label
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="parts" multiple="multiple" class="parameterdropdown">
<optgroup value="9" label="B3_L1" datagroupid="9">
      <option value="12">A01_Process1_Sub1</option>
      <option value="14">A03_Process3_Sub1 </option>
 </optgroup>
<optgroup value="6" label="A2_L2" datagroupid="6">
      <option value="7">A01_Process1_Sub1</option>
      <option value="9">A03_Process3_Sub1 </option>
</optgroup>
 <optgroup value="3" label="A1_L1" datagroupid="3">
      <option value="3">A01_Process1_Sub1</option>
      <option value="4">A03_Process3_Sub1 </option>
</optgroup>
</select>

Answer 3

您可以尝试以下操作：

GET

$("#parts").html($("#parts optgroup").sort(function (a, b) {
   a = a.label;
   b = b.label; 
   return (a < b) ? -1 : (a > b) ? 1 : 0;
}));

根据属性值重新排列选择optgroup标签

3 个答案: