sorting item between two list boxes

Question

Hi i have this code with 2 list boxes where i can add and move the item between the list boxes...my question is how do i sort the item after adding and removing the item

as example the default list is 12345 after i add 3 to the other listbox and remove it back it will become 12453 instead of back to 12345

$(function() {
  $("#button1").click(function() {
    $("#list1 > option:selected").each(function() {
      $(this).remove().appendTo("#list2");
    });
  });

  $("#button2").click(function() {
    $("#list2 > option:selected").each(function() {
      $(this).remove().appendTo("#list1");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>List A</h3>
  <select name="list1[]" id="list1" multiple="multiple" rows=2>

    <option value=1>Option 1</option>
    <option value=2>Option 2</option>
    <option value=3>Option 3</option>
    <option value=4>Option 4</option>
    <option value=5>Option 5</option>
    <option value=6>Option 6</option>
  </select>
  <br/>
  <input id="button1" type="button" value="Move to List B" />
</div>
<div>
  <h3>List B</h3>
  <select name="list2[]" id="list2" multiple="multiple" rows=2>

  </select>
  <br/>
  <input id="button2" type="button" value="Move to List A" /> <br/>
  <input id="button3" type="submit" value="Save to database" />
</div>

https://jsfiddle.net/cacaz0pj/

Possible duplicate of [How to display a page with a sorted drop down list?](https://stackoverflow.com/questions/17040915/how-to-display-a-page-with-a-sorted-drop-down-list) — Mosh Feu, Apr 26 '18 at 16:04

Eddie · Accepted Answer · 2018-04-26T16:24:24.953

can make a function and call it after adding the options. You can use sort()

$(function() {
  $("#button1").click(function() {
    $("#list1 > option:selected").each(function() {
      $(this).remove().appendTo("#list2");
    });
    sortList("#list2");  //Call the function to sort #list2
  });

  $("#button2").click(function() {
    $("#list2 > option:selected").each(function() {
      $(this).remove().appendTo("#list1");
    });
    sortList("#list1");  //Call the function to sort #list1
  });


  //Function to sort options
  var sortList = function(id) {
    $(id).find('option').sort(function(a, b) {
      return a.innerText.localeCompare(b.innerText);
    }).appendTo(id);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h3>List A</h3>
  <select name="list1[]" id="list1" multiple="multiple" rows=2>

    <option value=1>Option 1</option>
    <option value=2>Option 2</option>
    <option value=3>Option 3</option>
    <option value=4>Option 4</option>
    <option value=5>Option 5</option>
    <option value=6>Option 6</option>
  </select>
  <br/>
  <input id="button1" type="button" value="Move to List B" />
</div>
<div>
  <h3>List B</h3>
  <select name="list2[]" id="list2" multiple="multiple" rows=2>

  </select>
  <br/>
  <input id="button2" type="button" value="Move to List A" /> <br/>
  <input id="button3" type="submit" value="Save to database" />
</div>

You can also use for shorter code:

$("#button1").click(function(){
    $("#list1 > option:selected").appendTo("#list2");
    sortList('#list2');
});

$("#button2").click(function(){
    $("#list2 > option:selected").appendTo("#list1");
    sortList("#list1");
});

`

sorting item between two list boxes

1 Answers1