Filling up one dropdown with same value of the other

Currently I have 2 dropdown boxes with the same options. These options are all filled from the backend. javascript error Now I want it so that whenever I choose 1 option in the dropdown box, the other dropdown also automatically chooses the same value and this works both ways. The following is my dropdown box code:

        <select name="lead_status" id="leadstatus" class="form-control">           <option value="">Select</option>           <?php foreach($leadstatus as $key => $status): ?>           <option value="<?php echo $key; ?>" <?php echo $key==$lead->lead_status?'selected="selected"':'' ?>><?php echo $status; ?></option>           <?php endforeach; ?>         </select>         <select name="lead_status" id="leadstatus2" class="form-control">           <option value="">Select</option>           <?php foreach($leadstatus as $key => $status): ?>           <option value="<?php echo $key; ?>" <?php echo $key==$lead->lead_status?'selected="selected"':'' ?>><?php echo $status; ?></option>           <?php endforeach; ?>         </select> 

I've tried creating a function for onclick where it creates a check saying:

if (document.getElementById('leadstatus').value == '1')   document.getElementById("leadstatus2").value = '1'; 

But this wont work since I have a lot of data in the dropdown lists and it is dynamic.

Answers 1: of Filling up one dropdown with same value of the other

const leadStatusList = document.getElementById('leadstatus'); const leadStatus2List = document.getElementById('leadstatus2');  const setDropdownValue = (event) => {   leadStatusList.value = event.target.value;   leadStatus2List.value = event.target.value; }  leadStatusList.onchange = setDropdownValue; leadStatus2List.onchange = setDropdownValue; 

Answers 2: of Filling up one dropdown with same value of the other

let box1 = document.getElementById("box1"); let box2 = document.getElementById("box2"); box1.addEventListener("change", () => {   box2.selectedIndex = box1.selectedIndex; }); box2.addEventListener("change", () => {   box1.selectedIndex = box2.selectedIndex; });

<select id="box1">   <option value="1">Option 1</option>   <option value="2">Option 2</option>   <option value="3">Option 3</option>   <option value="4">Option 4</option>   <option value="5">Option 5</option> </select> <select id="box2">   <option value="1">Option 1</option>   <option value="2">Option 2</option>   <option value="3">Option 3</option>   <option value="4">Option 4</option>   <option value="5">Option 5</option> </select>