Question

我在我的网站上有3个下拉列表，每个下拉列表都有8个选项（1到8）。我的目标是根据您在其他下拉列表中选择的内容禁用下拉选项，总和最多为8个。因此，例如，如果您在第一个下拉列表中选择4，则只能在另外2个中选择1到4下拉列表。

如果您在第一个中选择8，则无法从其他选项中选择其他任何内容。

这是我尝试过的：

$(".options select").change(function() {
  var value1 = $("#input_1_5").val();
  var value2 = $("#input_1_6").val();
  var value3 = $("#input_1_7").val();
  var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
  var rest = 9-sum;

  $("#input_1_6 > option").slice(rest,9).each(function() {
    $(this).attr("disabled", true);
    });

  var rest2 = rest - 9
  $("#input_1_7 > option").slice(rest2,9).each(function() {
    $(this).attr("disabled", true);
    });
});

问题在于它只在你第一次选择时才起作用。不幸的是。

编辑：jsfiddle update https://jsfiddle.net/k7krx87L/4/

提前致谢！

Answer 1

您将使用以下选择器：

$("#input_1_6 option:gt(4)").prop("disabled", true);

这意味着从5开始禁用id为＃input_1_6的元素中的所有选项，选择器gt(4)表示索引4中的元素，索引从DOM中的0开始。

Answer 2

<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script>
 $(function () {


    $('#input_1_5').on('change', function (){
        var input_1_5 = $(this).val();
        var input_1_6 = $('#input_1_6').val();
        var input_1_7 = $('#input_1_7').val();
        var cur_val;
        cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
        for(i=1;i<=8;i++)
        {
            if((i+parseInt(cur_val))<=8)
            {
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
            }
            else
            {
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
            }
        }
    });
    $('#input_1_6').on('change', function (){
        var input_1_5 = $('#input_1_5').val();
        var input_1_6 = $(this).val();
        var input_1_7 = $('#input_1_7').val();
        var cur_val;
        cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
        for(i=1;i<=8;i++)
        {
            if((i+parseInt(cur_val))<=8)
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
            }
            else
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
            }
        }
    }); 
    $('#input_1_7').on('change', function (){
        var input_1_5 = $('#input_1_5').val();
        var input_1_6 = $('#input_1_6').val();
        var input_1_7 = $(this).val();
        var cur_val;
        cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
        for(i=1;i<=8;i++)
        {
            if((i+parseInt(cur_val))<=8)
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
            }
            else
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
            }
        }
    });

 });
</script>

 <select name="" id="input_1_5">
     <option value="0">0</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>
     <option value="7">7</option>
     <option value="8">8</option>
 </select>
 <select name="" id="input_1_6">
     <option value="0">0</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>
     <option value="7">7</option>
     <option value="8">8</option>
 </select>
 <select name="" id="input_1_7">
     <option value="0">0</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>
     <option value="7">7</option>
     <option value="8">8</option>
 </select>

</body>
</html>

希望这会对你有所帮助。

Answer 3

尝试一下，它将很好地工作。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type="text/javascript">
    $(window).load(function(){
        var $dropdown1 = $("select[name='project_manager[]']");
        var $dropdown2 = $("select[name='test_engineer[]']");
        var $dropdown3 = $("select[name='viewer[]']");

        $dropdown1.change(function() {
            $dropdown2.empty().append($dropdown1.find('option').clone());
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
            }
        });

        $dropdown2.change(function() {
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
            }
        });
});

</script>
</head>
<body>
  <select name="project_manager[]">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="test_engineer[]"  >
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<select name="viewer[]" >
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "vrLr9wyg"
      }], "*")
    }
  </script>
</body>
</html>

jQuery根据其他下拉列表的选定值禁用其他下拉列表值

3 个答案: