Hello is there any way to disable multiple options in a select form if you only choose one option?
For example:
First Select Form
<select name="secondchoice" id="second">
<option value="None">None</option>
<option value="Content Dev">Content Dev</option>
<option value="Web">Web</option>
<option value="Science">Science</option>
<option value="Managing">Managing</option>
</select>
Second Select Form
<select name="day2" id="exam2">
<option value="None">None</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
</select>
If I select "None" in the first form then the second form must disable the options "Monday-Thursday" the only option available must be also "None" in the second form. Thank you!
You can do this with javascript by hiding options in the second elements whenever the first select element changes by checking its value and hiding elements accordingly like so:
// Select Elements
const first = document.getElementById('first')
const second = document.getElementById('second')
// Option Elements
const one = document.getElementById('one')
const two = document.getElementById('two')
// Runs whenever first select has changed
first.onchange = () => {
// Checks First Selects Value
if (first.value === '1') {
// If '1' then hide TWO and show ONE
second.value = 'ONE'
one.hidden = false
two.hidden = true
} else if (first.value === '2') {
// Else, if '2' then hide ONE and show TWO
second.value = 'TWO'
one.hidden = true
two.hidden = false
}
}<select id='first'>
<option>1</option>
<option>2</option>
</select>
<select id='second'>
<option id='one'>ONE</option>
<option id='two'>TWO</option>
</select>This is a very basic example and can be improved alot.
you can do something like below, so when you do selecting none, other options would be disabled, and other than none it would be enabled again
function disabledEnabled(event) {
var optiosLists = document.getElementById("exam2").options;
for (let i = 0; i < optiosLists.length; i++) {
if(event.target.value === "None"){
optiosLists[i].disabled = true;
optiosLists[0].disabled = false;
} else {
optiosLists[i].disabled = false;
}
}
}
You can either disabled select element itself and each of its options. You can find 2 ways to achieve each of those below.