如何根据另一个下拉列表禁用下拉列表中的值

时间:2018-04-05 12:16:52

标签: javascript jquery html html-select

我有两个select下拉列表。第一个名字是“最小and the second one's name is最大值”,两者都有1-25的数字列表。

我想要的是,如果我从minimum下拉列表中选择任何值(例如:4),则另一个maximum下拉列表应该允许我仅选择那些等于或大于第一个值的值下拉值(例如:在这种情况下,值应大于或等于4)。

$(".selectClass").change(function() {
  $("select option").prop("disabled", false);
  $(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectClass" id="min">
  <option value="">minimum</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>
<select class="selectClass" id="max">
  <option value="">maximum</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

任何人都可以建议我怎么做。

Link to fiddle

5 个答案:

答案 0 :(得分:0)

尝试这有两个选择下拉列表。第一个名字是最小名字,第二个名字是最大名字,两个名字都有1-25的数字列表。

https://stackoverflow.com/a/10571044/8574868

答案 1 :(得分:0)

使用以下jQuery代码:

.

如果您允许$('#min').on('change', function (event) { var minVal = parseInt($('#min').val()); $('#max option').each(function () { if(parseInt($(this).val()) <= minVal) { $(this).prop('disabled', true); }else{ $(this).prop('disabled', false); } }); }); $('#max').on('change', function (event) { var maxVal = parseInt($('#max').val()); $('#min option').each(function () { if(parseInt($(this).val()) >= maxVal) { $(this).prop('disabled', true); }else{ $(this).prop('disabled', false); } }); }); =值相同,请从比较中删除min

答案 2 :(得分:0)

使用像这样的过滤器......

$("#min").change(function (){
    var $this = $(this);
    $("select option").prop("disabled", false);

    $("#max option").filter(function(){
        return parseInt(this.value) < parseInt($this.val());
    }).prop("disabled", true);

});

演示:https://www.codeply.com/go/SvA0XoSEDb

答案 3 :(得分:0)

当#min改变时,这将起作用

$('#min').change(function (){
   var self = $(this);
   var min = 1; 
   if(self.val() > 0 ){
     min = self.val(); //setting minimum value
   }
   var max_tags = $('#max option'); //getting all option of #max
   for(var i = 0; i<max_tags.length; i++){
     if(max_tags.eq(i).val() < min ){ // option value below than variab min
        max_tags.eq(i).css('display','none');
     }
   }
})

答案 4 :(得分:0)

您可以尝试:https://jsfiddle.net/danescucatalinconstantin/u1wn2gy2/15/

$("#min").change(function() {
     var minVal = $(this).val();
     $('#max>option').each(function(index){
     if($('#max>option[value='+index+']').val() < minVal){
        $('#max>option[value='+index+']').hide();
     }else{
        $('#max>option[value='+index+']').show();
     }
 });