title: Sorting multiple select dropdown options using jquery
body: <p>I am using the following code for adding country where user selects country from one mutiple-select and adds to another multiple-select and on submit the countries of second multiple-select is inserted into database.</p>
  
  <p>.js</p>
  
  <pre><code>$(document).ready(function(){
      $('.add').click(function(){
          $('#country_list option:selected').appendTo('#country_select');
      });
      $('.remove').click(function(){
          $('#country_select option:selected').appendTo('#country_list');
      });
      $('.add-all').click(function(){
          $('#country_list option').appendTo('#country_select');
      });
      $('.remove-all').click(function(){
          $('#country_select option').appendTo('#country_list');
      });
      $("#register").click(function() {  
      $("#country_select option").each(function() {
          $(this).attr("selected", "selected");
      });
  });
  });
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>  &lt;select id="country_list" size="10" multiple style="min-width: 200px;"&gt;
     &lt;option value="US"&gt;United States&lt;/option&gt;
     &lt;option value="UK"&gt;United Kingdom&lt;/option&gt;
     &lt;option value="IN"&gt;India&lt;/option&gt;          
    &lt;/select&gt;
    &lt;table border="0"&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="button" class='add' value="&gt;"/&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="button" class='remove' value="&lt;"/&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="button" class='add-all' value="&gt;&gt;&gt;"/&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="button" class='remove-all' value="&lt;&lt;&lt;"/&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
    &lt;select size="10" name="country_select[]" id="country_select" multiple  style="min-width: 200px;"&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>Here when add button is clicked the selected items in dropdown country-list is moved to country-select.</p>
  
  <p>What I require is that when a country is added then it should be moved into the dropdown country-select in order of name. Currently when a country is added it goes to the bottom of the list in country-options.</p>
  
  <p>I tried this <a href="https://stackoverflow.com/questions/278089/javascript-to-sort-contents-of-select-element">Javascript to sort contents of select element</a> but not working.</p>