有什么方法可以禁用 Select 2 的选项，其值大于 Select 1 中选择的选项值

Question

我在一个表单中有两个选择。 他们不是兄弟姐妹。 它们都有 15 个选项，其中包含 1-15 个值。 我需要得到的是，当从Select A中选择一个值为 5 的选项时。然后应禁用Select B 的值大于 5 的选项。

这是我的代码：

 <select name="" id="children"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

因此，如果该人选择5个孩子，则在校孩子不应大于5个。

Answer 1

你可以试试下面的代码

jQuery( document ).ready(function($){
    $('#child_going_school').change(function() {

        var val1 = parseInt($('#children').val());
        var val2 = parseInt($(this).val());

        console.log(val1)
        console.log(val2)

        if(val1 != ''){
            if(val2 > val1){
                $(this).val(val1);
            }
        }

    });
});

在这种情况下，如果第二个下拉值大于第一个，则将其值设置为第一个下拉值。 我希望这可以帮助你

Answer 2

您可以使用filter()获得具有更高值的选项，例如：

 $("#children").change(function() { var val = +$(this).val(); $("#child_going_school option").removeAttr('disabled').filter(function(){ return +this.value > val; }).attr('disabled','disabled') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

另一种选择是使用hide和show而不是禁用选项。

 $("#children").change(function() { var val = +$(this).val(); $("#child_going_school option").show().filter(function() { return +this.value > val; }).hide(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Answer 3

首先获取第一个下拉列表的值，然后比较和禁用如下。

 $(document).on('change', '#children', function(){ var fval = $(this).val(); $("#child_going_school option").each(function() { var $thisOption = $(this); if( $thisOption.val() > parseInt(fval)) { $thisOption.attr("disabled", "disabled"); } }); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Answer 4

您可以遍历child_going_school选项，加载后触发更改事件并检查children select 的值：

$('#children').on('change', function() {
  var value= this.value;
  $('#child_going_school option').each(function(_, el) {
    $(el).prop('disabled', parseInt(value) < parseInt(el.value));
  });
});

$('#children').trigger('change');

 $('#children').on('change', function() { var value = this.value; $('#child_going_school option').each(function() { $(this).prop('disabled', parseInt(value) < parseInt(this.value)); }); }); $('#children').trigger('change');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="" id="children"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select> <select name="" id="child_going_school"> <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> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> </select>

Answer 5

<script>
$(document).ready(function(){
  $('#children').change(function(event){
   $('#child_going_school').children().each(function(_, el) {
    $(el).prop('disabled', Number($(el).val()) > event.target.value);
  });
  });
});
</script>