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

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