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

Question

我有两个 select 下拉菜单。第一个的名字是 ``minimumand the second one's name ismaximum` 并且都有一个从 1-25 的数字列表。

我想要的是，如果我 select 来自 minimum 下拉列表的任何值（例如：4），另一个 maximum 下拉列表应该只允许我 select那些等于或大于第一个下拉值的值（例如：在这种情况下，值应大于或等于 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

Answer 1

试试这有两个 select 下拉菜单。第一个的名字是最小的，第二个的名字是最大的，并且都有一个从 1-25 的数字列表。

Answer 2

使用以下 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 和 max 值相同，请从比较中删除 =。

Answer 3

使用这样的过滤器...

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

Answer 4

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

Answer 5

你可以试试这个：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();
     }
 });

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

How to disable values in a dropdown according to another dropdown

html

javascript

jquery

html-select