How to disable values in a dropdown according to another dropdown

Question

I have two select dropdown. First one's name is ``minimum and the second one's name is maximum` and both have a list of numbers from 1-25.

I want that is if I select any value from the minimum dropdown (eg: 4), the other maximum dropdown should allow me to select only those values which are equal or greater than the first dropdown value (eg: in this case values should be greater or equal to 4).

 $(".selectClass").change(function() { $("select option").prop("disabled", false); $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectClass" id="min"> <option value="">minimum</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> <option value="6">6</option> </select> <select class="selectClass" id="max"> <option value="">maximum</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> <option value="6">6</option> </select> 

Can anyone please suggest me how to do it.

Link to fiddle

Answer 1

Try this have two select dropdown. First one's name is minimum and the second one's name is maximum and both have a list of numbers from 1-25.

https://stackoverflow.com/a/10571044/8574868

Answer 2

Use the following jQuery code for the same:

$('#min').on('change', function (event) {
    var minVal = parseInt($('#min').val());

    $('#max option').each(function () {
        if(parseInt($(this).val()) <= minVal)
        {
            $(this).prop('disabled', true);
        }else{
            $(this).prop('disabled', false);
        }
    });
});

$('#max').on('change', function (event) {
    var maxVal = parseInt($('#max').val());
    $('#min option').each(function () {
        if(parseInt($(this).val()) >= maxVal)
        {
            $(this).prop('disabled', true);
        }else{
            $(this).prop('disabled', false);
        }
    });
});

Please remove the = from the comparison if you allow min and max values to be same.

Answer 3

Use a filter like this...

$("#min").change(function (){
    var $this = $(this);
    $("select option").prop("disabled", false);

    $("#max option").filter(function(){
        return parseInt(this.value) < parseInt($this.val());
    }).prop("disabled", true);

});

Demo: https://www.codeply.com/go/SvA0XoSEDb

Answer 4

When #min change this will work

$('#min').change(function (){
   var self = $(this);
   var min = 1; 
   if(self.val() > 0 ){
     min = self.val(); //setting minimum value
   }
   var max_tags = $('#max option'); //getting all option of #max
   for(var i = 0; i<max_tags.length; i++){
     if(max_tags.eq(i).val() < min ){ // option value below than variab min
        max_tags.eq(i).css('display','none');
     }
   }
})

Answer 5

You can try this: https://jsfiddle.net/danescucatalinconstantin/u1wn2gy2/15/

$("#min").change(function() {
     var minVal = $(this).val();
     $('#max>option').each(function(index){
     if($('#max>option[value='+index+']').val() < minVal){
        $('#max>option[value='+index+']').hide();
     }else{
        $('#max>option[value='+index+']').show();
     }
 });