根据之前的选择隐藏选项

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() and prop()首先在另一个select中找到价值较低的选项集合，然后禁用它们

$('#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 提供了非常简单和好的答案。但同时我尝试了以下代码：

HTML

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

脚本

$(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() {
 $("#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>

更多详情refer this fiddle

根据之前的选择隐藏选项

Hide options based on previous selection

jquery

select

drop-down-menu

html-select

option