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()首先在另一个选项中查找较低值选项的集合，然后将其停用

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

@charlietfl提供了非常简单的答案。但同时我尝试了以下代码：

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

根据先前的选择隐藏选项

3 个答案: