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>

create a function that re-writes the innerhtml of the second select based on the new state of the first one. — Dave S, May 17 '19 at 04:13

Object object · Answer 1 · 2019-05-17T04:25:04.670

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>

score 0 · Answer 2 · answered May 17 '19 at 04:18

0

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

answered May 17 '19 at 04:18

Nengak dakup

88
2
11

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. :) – Hasta Dhana May 25 '19 at 03:27

Adwaith R Krishna · Answer 3 · 2019-05-17T05:08:00.917

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
            }

        });
    });

score 0 · Answer 4 · answered May 17 '19 at 04:37

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>

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

4 Answers4