Is there any way to disable options of Select 2 which has larger values than the value of option selected in Select 1

Question

I have two select in a form. They are not siblings. They both has 15 options which has 1-15 values. And what I need to get is that when an option is selected from Select A which has a value of 5. Then the options of Select B which has larger value than 5 should be disabled.

This is my code:

 <select name="" id="children"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

So if the person selects 5 children, the school going children should not be greater than 5.

Answer 1

You can try the following code

jQuery( document ).ready(function($){
    $('#child_going_school').change(function() {

        var val1 = parseInt($('#children').val());
        var val2 = parseInt($(this).val());

        console.log(val1)
        console.log(val2)

        if(val1 != ''){
            if(val2 > val1){
                $(this).val(val1);
            }
        }

    });
});

In this if the second dropdown value is greater than first then set its value as first dropdown value. I hope this helps you

Answer 2

You can use filter() to get the option with higher values like:

 $("#children").change(function() { var val = +$(this).val(); $("#child_going_school option").removeAttr('disabled').filter(function(){ return +this.value > val; }).attr('disabled','disabled') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Another option is using hide and show instead of disabling the options.

 $("#children").change(function() { var val = +$(this).val(); $("#child_going_school option").show().filter(function() { return +this.value > val; }).hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Answer 3

First get value of first drop down and then compare and disable as below.

 $(document).on('change', '#children', function(){ var fval = $(this).val(); $("#child_going_school option").each(function() { var $thisOption = $(this); if( $thisOption.val() > parseInt(fval)) { $thisOption.attr("disabled", "disabled"); } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Answer 4

You can iterate through child_going_school options, trigger the change event once loaded and check with the value of children select:

$('#children').on('change', function() {
  var value= this.value;
  $('#child_going_school option').each(function(_, el) {
    $(el).prop('disabled', parseInt(value) < parseInt(el.value));
  });
});

$('#children').trigger('change');

 $('#children').on('change', function() { var value = this.value; $('#child_going_school option').each(function() { $(this).prop('disabled', parseInt(value) < parseInt(this.value)); }); }); $('#children').trigger('change');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Answer 5

<script>
$(document).ready(function(){
  $('#children').change(function(event){
   $('#child_going_school').children().each(function(_, el) {
    $(el).prop('disabled', Number($(el).val()) > event.target.value);
  });
  });
});
</script>