how to disable multiple options if one option is selected in the forms-CodePudding

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!

CodePudding user response：

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.

CodePudding user response：

You can either disabled select element itself and each of its options. You can find 2 ways to achieve each of those below.

CodePudding user response：

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;    
                }
            
            
    }
    
}