enable or disable option from select

Question

I am trying to make an option either selectable OR non-selectable based on whether or not they chose another option. For example, if there is options 1-6 and they have NOT chosen option 1 in their first select box, then in that SAME select box and any other in the form, then option 6 could NOT be chosen.

I looked around, but everything is about clicking a button to achieve this.

This is the code I have (I have also tried onclick)

   <script type="text/javascript">
      function makeDisable(){
      var x=document.getElementById("mySelect2");
      x.disabled=true
      }
     function makeEnable(){
         var x=document.getElementById("mySelect2");
          x.disabled=false
     }</script>
     <form>
        <select class="mySelect" id="mySelect">
        <option onchange="makeEnable()" value="Enable list">Apple</option>
        <option onchange="makeDisable()" value="Disable list">Banana</option>
        <option id="mySelect2" disabled="true">Orange</option>
    </select>
    </form>

Answer 1

Option elements don't have event "onchange", but Select elements do.

I've quickly wrote a code snippet below. You may add more select items. When you choose an option in one of those select elements, you shouldn't choose options at same index in other select elements.

function toggleDisability(selectElement) {
  //Getting all select elements
  var arraySelects = document.getElementsByClassName('mySelect');
  //Getting selected index
  var selectedOption = selectElement.selectedIndex;
  //Disabling options at same index in other select elements
  for (var i = 0; i < arraySelects.length; i++) {
    if (arraySelects[i] == selectElement)
      continue; //Passing the selected Select Element

    arraySelects[i].options[selectedOption].disabled = true;
  }
}

<form>
  <select onchange="toggleDisability(this);" class="mySelect" id="mySelect1">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
  <select onchange="toggleDisability(this);" class="mySelect" id="mySelect2">
    <option>Hamburger</option>
    <option>Pizza</option>
    <option>Cola</option>
  </select>
</form>