Copy Form Data and a Selected Listbox Value with JavaScript

This example extends copying text fields by making the state field a dropdown. When “Same as above” is selected, JavaScript copies the text inputs and selects the same state in the second list.

residenceState.value = officeState.value;

Open copy-listbox demo →

Copy a Dropdown Selection by Value Top ↑

If the destination select contains an option with the same value, assigning select.value selects it directly.

const officeState = document.getElementById("officeState");
const residenceState = document.getElementById("residenceState");
residenceState.value = officeState.value;

Copy the Complete Form Group Top ↑

function copyAddress() {
  residenceAddress1.value = officeAddress1.value;
  residenceAddress2.value = officeAddress2.value;
  residenceCity.value = officeCity.value;
  residenceState.value = officeState.value;
}

Why Match Values Instead of Option Indexes Top ↑

The original tutorial loops through the first dropdown, finds the selected index, and selects the same index in the second dropdown. That only works reliably when both lists stay in exactly the same order. Matching by value expresses the real relationship and remains correct when ordering changes.

Clear the Destination Group Top ↑

function clearResidence() {
  residenceAddress1.value = "";
  residenceAddress2.value = "";
  residenceCity.value = "";
  residenceState.value = "";
}

Related Tutorials Top ↑

Copy text form data · Listbox · Event handling · Mouse over / mouse out

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: