根据先前的选择隐藏选项答案

【问题标题】：Hide options based on previous selection根据先前的选择隐藏选项
【发布时间】：2017-04-22 11:07:09
【问题描述】：

我需要有关下拉选择器的帮助 - 我有两个带有价格的下拉列表（起价和起价），在第二个下拉列表中，我需要使任何价格低于或等于先前选择的价格值禁用。谁能帮我用 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>

【问题讨论】：

你到底想做什么？
当我从第一个下拉列表中选择例如 2000 时，我需要在第二个选择中禁用 2000 或更少的任何选项。我正在尝试制作一个价格范围选择器，您可以在其中选择第一个价格作为“价格来自”，然后将第二个价格指定为“价格至”。显然，您不应该选择“price to”高于“price from”。
检查我的答案

标签： jquery select drop-down-menu html-select option

【解决方案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>

【讨论】：

非常好的和简单的答案。我学会了filter 和prop 的使用，这是我从未学过的。谢谢+1 :)
谢谢，这正是我正在寻找的

【解决方案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;
    });
}

【讨论】：

【解决方案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

【讨论】：