tengo esta lista
<select name="method" required class="form-control"> <option value="1">Cash</option> <option value="2">Credit</option> </select> <select name="method2" class="form-control"> <?php while (...) { echo '<option value="id">Title</option>'; } ?> </select>Si el usuario elige la opción Efectivo del primer "método seleccionado",
el segundo "select method2" debe estar deshabilitado, y si elige Crédito, debe estar activado
¿Cómo puedo hacer eso?
Gracias por adelantado
En su forma más simple, puede agregar un detector de eventos a su primer cuadro de selección que escucha un evento de cambio :
let selectOne = document.querySelector("#select-1"), selectTwo = document.querySelector("#select-2"); selectOne.addEventListener("change", () => { if (selectOne.value == 1) { selectTwo.disabled = true; } else { selectTwo.disabled = false; } }) <select name="method" required class="form-control" id="select-1"> <option value="-">-</option> <option value="1">Cash</option> <option value="2">Credit</option> </select> <select name="method2" class="form-control" id="select-2"> <option value="-">-</option> <option value="1">Just For Demo Purposes</option> </select>Primero puede escuchar cualquier cambio en la selección usando el evento de change
El elemento de select en HTML tiene una propiedad disabled , que se establece en falso de forma predeterminada a menos que esté explícitamente deshabilitada, puede establecer esta propiedad en Verdadero o Falso para habilitar o deshabilitar la selección respectivamente
const sel = document.getElementById('selectm'); const sel2 = document.getElementById('selectm2'); handler = () => { console.log(sel.value) if (sel.value == 1) sel2.disabled = true else sel2.disabled = false; } sel.addEventListener('change', handler) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <select name="method" required class="form-control" id="selectm"> <option value="0">Default</option> <option value="1">Cash</option> <option value="2">Credit</option> </select> <select name="method2" class="form-control" id="selectm2"> <option value="1">test</option> <option value="2">test-1</option> </select> </body> </html>