CODEWITHSUNDEEP
javascriptjqueryhtmlsorting
Velmurugan
Velmurugan

Reputation: 63

rearrange select optgroup tag based on attribute value jquery

My html code coming dynamically like as follows. But i want to do sorting based on attribute "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>

I tried the following script. It is not working. Please help me.

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

Expecting output like as follows.

<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>

Upvotes: 3

Views: 389

Answers (3)

Mamun
Mamun

Reputation: 68923

You can try the following:

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

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371019

Since the arguments to the sort function are native DOM elements, not jQuery objects, you have to use standard JS methods if you aren't going to convert them to jQuery objects first:

$("#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>

Upvotes: 1

Bhumi Shah
Bhumi Shah

Reputation: 9476

You just need to change your code to this: 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  ;
}));

Upvotes: 2

Related Questions