I have this list
<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>If the user chooses the Cash option from the first "select method",
the second "select method2" must be disabled, and if he chooses Credit, it must be activated
How do I do that?
Thanks in advance
In it's simplest form, you can add an event listener to your first select box that listens for a change event:
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>First you can listen for any changes in the select using change event
The select element in HTML has a disabled property, which is set to false by default unless its explicitly disabled, you can set this property to True or False to enable or disable the select respectively
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>