Question

如果用户select_a = 4且select_b用户只能选择1，我该怎么做？

用户可以选择A或B上的任何值，两者的总和必须等于5

<select name="select_a" id="select_a">
    <option value="0">Please Select</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>
</select>

<select name="select_b" id="select_b">
    <option value="0">Please Select</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>
</select>

Answer 1

你可以使用这样的东西

publication

ًWorking DEMO

但另一方面......让我们说我们可以选择另一个选择，其值等于5 ..就像这样

$(document).ready(function(){
    $('select').on('change',function(){
        var select1 = parseInt($('#select_a').val()); // get select1 value
        var select2 = parseInt($('#select_b').val()); // get select2 value
        if($(this).attr('id') == 'select_a'){ // if this selector with id select_d
            var value = 5 - select1 ; // get the value minus 5
            $('#select_b').find('option:not([value="'+value+'"])').prop('disabled',true); // disable all option in the select2 but not the one which equal to 5
        }else{ // same thing with select with id select_b
           var value = 5 - select2 ;
           $('#select_a').find('option:not([value="'+value+'"])').prop('disabled',true);
        }
        //check if total is 5  disable all option again to false and make it selectable
        if(select1 + select2 == 5){
            $('select > option').prop('disabled',false);
        }
    });
});

DEMO

Answer 2

可能的解决方案：

向触发select

onchange

将最近更改的select的值添加到另一个option上的每个select的值中：
- 如果添加＆lt; = 5，请启用option。
- 如果添加> 5，禁用option。

这是一个演示：

$(document).ready(function() {
  
  // for the selects in the page
  $("select").on("change", function() {
  
    // save the value of the modified val
    var val = $(this).val();
  
    // check the other select options
    $("select").not(this).find("option").each(function() {
        
      // enable the option if it the value addition is <= 5
      if (parseInt($(this).val()) + parseInt(val) <= 5) {
        $(this).prop("disabled", false);
      }
      // or disable it if the addition is higher than 5
      else {
        $(this).prop("disabled", true);
      }
      
    });
  
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select name="select_a" id="select_a">
    <option value="0">Please Select</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>
</select>

<select name="select_b" id="select_b">
    <option value="0">Please Select</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>
</select>

Answer 3

您需要挂钩 select_a 的change事件并更新 select_b 中的option元素，如：

$("#select_a").change(function () {
    l = 'Change<br/>';
    var o = $(this).find("option:selected");

    var v = +$(o).val();
    $.each($("#select_b option"), function (a, b) {
        $b=$(b),bv=+$b.val();
        if (bv + v !== 5) {
            $b.attr("disabled", true);
        } else {
            $b.removeAttr("disabled", false);
        }
    });
});

同样，您可以连接 select_b 。但是，在第一次更改为第二次选择时，将两者的变化挂钩相当瘫痪。当用户从 select_a 中选择 2 时，我们只在 select_b 中启用 3 。现在，如果用户在 select_b 中选择 3 ，我们会为其处理更改事件。这只会在 select_a 中启用 2 。所以这是一个死胡同。

这是 fiddle

如何限制两个选择选项以匹配某个值？

3 个答案: