How to disable values in a dropdown according to another dropdown

Question

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

I want that is if I select any value from the minimum dropdown (e.g.: 4), the other maximum dropdown should allow me to select only those values which are equal or greater than the first dropdown value (e.g.: 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

Why is this tagged [tag:twitter-bootstrap]? – Carol Skelly Apr 05 '18 at 12:51 — Carol Skelly, Apr 05 '18 at 12:51

score 0 · Answer 1 · answered Apr 05 '18 at 12:20

0

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

answered Apr 05 '18 at 12:20

Sathish Ravichandran

21
4

the link you have shared its changing the dropdown according to the selected one,but i want to disable the values which less than the selected value. – Sam Apr 05 '18 at 12:25
Better you can do build a array once the value choose from first dropdown by clicking the event you can get the value once u got the value from fist dropdown .make a condition and store the values gretaer than or equal to your first dropdown value and pass the array variable to second dropdown – Sathish Ravichandran Apr 05 '18 at 12:34

Babu Swami · Accepted Answer · 2018-04-05T13:18:10.807

0

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.

edited Apr 05 '18 at 13:18

answered Apr 05 '18 at 12:46

Babu Swami

798
3
10

@ thisisbobbs thank you but its not working if it is above 10.here is the fiddle https://jsfiddle.net/lakshmipriya001/5az3Lb4r/48/ – Sam Apr 05 '18 at 13:13
@lakshmipriya Just updated the code, please recheck. – Babu Swami Apr 05 '18 at 13:18

score 0 · Answer 3 · answered Apr 05 '18 at 12:48

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

score 0 · Answer 4 · answered Apr 05 '18 at 13:06

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');
     }
   }
})

score 0 · Answer 5 · answered Apr 05 '18 at 13:49

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();
     }
 });

How to disable values in a dropdown according to another dropdown

5 Answers5