Disabling Second Drop Down Menu Options Based on First Drop Down Menu Options

Question

I need to disable the options in the Aspired drop-down menu. E.g User chose 3 for "Current" and the option 1 and 2 will be disabled for Aspired. If the user chose 4 in "Current" then option 1, 2 and 3 will be disabled and so on and so forth. I need help in creating logic using JavaScript.

<label>Current:</label>
<select name="Current">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Answer 1

If you can use Jquery. You need to select the value chosen say n from Current select. Then loop until that value from 1 to n in the Aspired select and add 'disabled attribute' as true

<label>Current:</label>
<select name="Current">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

---

   $(document).ready(function(){
        $("select[name='Current']").change(function(){  
            $("select[name='Aspired']").children("option").attr('disabled', false) // makes all options to selectable in case of new selection in Current select
            for (i = 0; i < $(this).children("option:selected").val(); i++) {
              $("select[name='Aspired']").children('option[value='+ i +']').attr('disabled', true) // disabling all the values uptil the select value
            }

        });
    });

Answer 2

function disFun(){

  var Aspired = document.getElementById("Aspired").options;
  var Current = document.getElementById("Current").value;
    
  for (var i=1;  i < +Current; i++) {
      Aspired[i].disabled = true;
  }

}

<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
    <option value="select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>

<label>Aspired:</label>
<select id="Aspired" name="Aspired">
    <option value="select">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Answer 3

This might help you with your logic. Remember it's an ES6 way.

Pure Js ES6 Version

function onCurrentChange() {
  const options = document.getElementById("aspired").options;
  const listArray = Array.from(options);
  listArray.forEach(item => {
    if (item.value < document.getElementById("current").value) {
      item.disabled = true;
    }
  });
}

<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

The backward compatible version (IE9+) Version

function onCurrentChange() {
  const options = document.getElementById("aspired").options;
  Array.prototype.forEach.call(options, function(child, index) {
    if (child.value < document.getElementById("current").value) {
      child.disabled = true;
    }
  });
}

<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Jquery Version

function onCurrentChange() {
  $("#aspired option").each(function() {
    if ($(this).val() < $("#current").val()) {
      $(this).attr("disabled", true);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  </select>

<label>Aspired:</label>
<select name="Aspired" id="aspired">
  <option value="select">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Answer 4

Not ready to write any code now, but you can use JavaScript to get the value of the "current" select after it has been selected, to do that you can add a click event listener for the options. To get the value, check out this thread Get selected value in dropdown list using JavaScript? From there, use it to automatically populate the options for the aspired select element, using conditions based on the first value... This might help for the last step Adding options to select with javascript