根据以前的选择隐藏选项

Question

我需要一个下拉选择器的帮助 - 我有两个下拉列表与价格（价格从和价格）在第二个下拉列表中我需要降低任何价格或等于先前选定的值被禁用。任何人都可以用jQuery来帮助我，它会这样做吗？

<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>

Answer 1

使用filter()和prop()首先找到的较低值选项集合中的其他选择，然后禁用它们

$('#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>

Answer 2

@charlietfl提供真简单和Nic答案。但同时，我尝试下面的代码：

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

Answer 3

$(document).ready(function() { 
 
\t $("#selectFrom").change(function(){ 
 
\t \t \t $('#selectto option').each(function (j, option1) { 
 
     if (option1.value >= $("#selectFrom option:selected").val()) { 
 
      $(this).prop('disabled', false); 
 
     }else{  \t \t 
 
      $(this).prop('disabled', true); 
 
     } 
 
    }); 
 
\t }); 
 
});

<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>

˚F或更多细节refer this fiddle