Move Options between Two Lists

Move selected players from one multiple-select list to another, move them back, or move all options at once. This pattern works for team building, permissions and category assignment.

Move Selected Options Top ↑

$( "#move-right" ).on( "click", function () {
    $( "#available-team option:selected" )
        .appendTo( "#selected-team" );
});

$( "#move-left" ).on( "click", function () {
    $( "#selected-team option:selected" )
        .appendTo( "#available-team" );
});

Move All Options Top ↑

$( "#move-all-right" ).on( "click", function () {
    $( "#available-team option" )
        .appendTo( "#selected-team" );
});

$( "#move-all-left" ).on( "click", function () {
    $( "#selected-team option" )
        .appendTo( "#available-team" );
});

← Listbox tutorial · Database dropdowns

Original football-team demo →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: