Design Chemical

<form>
  <fieldset>

    <select name="selectfrom" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto" id="select-to" multiple size="5">
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
      <option value="7">Item 7</option>
    </select>

  </fieldset>
</form>

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

});

8 Comments

• 
  Marty 2011 Apr 27 at 11:45 pm

  Hey thanks a lot!, you helped me to find the answer to my problem. I was looking for some solution that would remove a list item which had no id or something that identify it

  Reply
• 
  fatigue 2011 Apr 18 at 2:57 pm

  Thank you for your clear explanation and nice code.

  Reply
  • 
    Lee 2011 Apr 18 at 3:41 pm

    your welcome

    Reply
• 
  Jonathon 2010 Nov 15 at 9:32 pm

  How do you pull the new values for sending via Jquery ajax, when call via value attribute the value is returned empty.

  Reply
  • 
    admin 2010 Nov 15 at 10:01 pm

    To get the value of the select options use:

    $('#select-to option').each(function(){
      $(this).val();
    });
    

    Reply
• 
  Jonathon 2010 Nov 15 at 7:50 pm

  Nice snippet,

  Have you thought of adding a counter to have max list count? So the user could add a maximum of eight options.

  This is something I am working on for adding tags to an article, so the user can choose from a set of pre-defined tags.

  If you have a solution let me know.

  Reply
  • 
    admin 2010 Nov 15 at 10:11 pm

    You can use the length property to count the number of options in the select list – e.g

    $('#select-from option:selected').each( function() {
    			$('#select-to').append(""+$(this).text()+"");
    			$(this).remove();
    			var checkLength = $('#select-to option').length;
    			alert(checkLength);
    		});
    

    See Demo

    Reply
• Change Order of Multiple Select Lists Using jQuery « Design Chemical – Web Design, Printing, Packaging & SEO 2010 May 21 at 4:36 pm

  [...] Contacts « Create Add & Remove Select Lists Using jQuery [...]

  Reply