CODEWITHSUNDEEP
jqueryselectdrop-down-menuhtml-select
Martin Hlavačka
Martin Hlavačka

Reputation: 45

Hide options based on previous selection

I need a help with a drop-down selectors - I have two drop-down lists with prices (price from and price to) where in the second drop-down I need to make any price lower or equal to the previously selected value disabled. Can anyone help me with jQuery which will do that, plase?

<select>       
  <option style="display:none" selected value="0">Set minimal price</option>
  <option value="0.01">0</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
</select>

<select>       
  <option style="display:none" selected value="0">Set maximal price</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
  <option value="3000">3000</option>
</select>

Upvotes: 1

Views: 57

Answers (3)

Harshal Patil
Harshal Patil

Reputation: 6759

$(document).ready(function() {
	$("#selectFrom").change(function(){
			$('#selectto option').each(function (j, option1) {
       if (option1.value >= $("#selectFrom option:selected").val()) {
            $(this).prop('disabled', false);
       }else{       		
           $(this).prop('disabled', true);
       }
    });
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectFrom">       
  <option  style="display:none" selected value="0">Set minimal price</option>
  <option value="0">0</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
</select>

<select id="selectto">       
  <option style="display:none" selected value="0">Set maximal price</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
  <option value="3000">3000</option>
</select>

For more details refer this fiddle

Upvotes: 0

Sanchit Gupta
Sanchit Gupta

Reputation: 3224

@charlietfl provide really Simple and Nice answer. But meanwhile I tried the following code :

HTML

<select name="minval" class="minvalue"></select>
<select name="maxval" class="maxvalue"></select>

SCRIPT

$(function(){
    var _price = ["0","500","1000","1500","2000","2500","3000"];

    var options     = '';
    for(var i = 0;i<_price.length;i++){
        options +='<option value="'+_price[i]+'">'+number_format(_price[i],'&pound;')+'</option>';
    }
    jQuery('[name="minval"]').html('<option value="0">Set minimal price</option>'+options);
    jQuery('[name="maxval"]').html('<option value="0">Set maximal price</option>'+options);


    // Change on min price
    jQuery('body').on('change','[name="minval"]',function(){
        var optionss        = '';
        var _selected_val   = jQuery(this).find(":selected").val();
        var indexx          = jQuery.inArray(_selected_val,_price);

        for(var j = indexx+1;j<_price.length;j++){
            optionss +='<option value="'+_price[j]+'">'+number_format(_price[j],'&pound;')+'</option>';
        }
        jQuery('[name="maxval"]').html('<option value="0">No Max</option>'+optionss);
    })
})
function number_format(n, currency) {
    return currency + " " + n.replace(/./g, function(c, i, a) {
        return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
    });
}

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

Use filter() and prop() to first find collection of lower value options in the other select and then disable them

$('#p-min').change(function(){
  var minVal = +$(this).val();
  // enable all, filter lower or equal ones and disable them
  $('#p-max option').prop('disabled', false).filter(function(){
     return +this.value <= minVal;
  }).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="p-min" size="6">       
  <option style="display:none" selected value="0">Set minimal price</option>
  <option value="0.01">0</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
</select>

<select  id="p-max" size="6">       
  <option style="display:none" selected value="0">Set maximal price</option>
  <option value="500">500</option>
  <option value="1000">1000</option>
  <option value="1500">1500</option>
  <option value="2000">2000</option>
  <option value="2500">2500</option>
  <option value="3000">3000</option>
</select>

Upvotes: 1

Related Questions