Actualmente tengo 2 cuadros desplegables con las mismas opciones. Todas estas opciones se completan desde el backend. Ahora quiero que cada vez que elija 1 opción en el cuadro desplegable, el otro menú desplegable también elija automáticamente el mismo valor y esto funcione en ambos sentidos. El siguiente es mi código de cuadro desplegable:
<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>Intenté crear una función para onclick donde crea un cheque que dice:
if (document.getElementById('leadstatus').value == '1') document.getElementById("leadstatus2").value = '1';Pero esto no funcionará ya que tengo muchos datos en las listas desplegables y es dinámico.
Dado que la pregunta menciona... ...el otro menú desplegable también elige automáticamente el mismo valor y esto funciona en ambos sentidos...
Prueba lo siguiente, ..
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;Simplemente establezca la propiedad de índice selectedIndex del segundo menú desplegable en la del primer menú desplegable:
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>