Demo: Move Options from One Listbox to Another

Select one or more options in the first list, then move the selected options or all options to the second list.

Use Ctrl on Windows/Linux or Command on macOS to select multiple options where required by your browser.

The complete modern source used by this demo is available below so users can copy both the JavaScript and the form markup.

Complete JavaScript Source Top ↑

const startingValues = ["PHP", "ASP", "JavaScript", "HTML", "Perl", "MySQL"];
const available = document.getElementById("available");
const selected = document.getElementById("selected");

function addAllOptions() {
  available.replaceChildren();
  startingValues.forEach((value) => available.add(new Option(value, value)));
}

function moveSelectedOptions() {
  Array.from(available.selectedOptions).forEach((option) => selected.append(option));
}

function moveAllOptions() {
  Array.from(available.options).forEach((option) => selected.append(option));
}

function removeAllSelectedOptions() {
  selected.replaceChildren();
}

document.getElementById("addAll").addEventListener("click", addAllOptions);
document.getElementById("moveSelected").addEventListener("click", moveSelectedOptions);
document.getElementById("moveAll").addEventListener("click", moveAllOptions);
document.getElementById("removeAll").addEventListener("click", removeAllSelectedOptions);

Complete HTML/Form Source Top ↑

<form name="drop_list" action="yourpage.php" method="post">
  <button id="addAll" type="button">Add All</button>

  <select id="available" name="Category" multiple size="7">
    <option value="PHP">PHP</option>
    <option value="ASP">ASP</option>
    <option value="JavaScript">JavaScript</option>
    <option value="HTML">HTML</option>
    <option value="Perl">Perl</option>
    <option value="MySQL">MySQL</option>
  </select>

  <button id="moveSelected" type="button">Move &gt;</button>
  <button id="moveAll" type="button">Move All &gt;&gt;</button>

  <select id="selected" name="SubCat" multiple size="8"></select>

  <button id="removeAll" type="button">Remove All</button>
</form>

Back to tutorial on moving options from one list to another · Listbox · JavaScript

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: