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

【问题标题】：jQuery disable other dropdown values based on selected value of other dropdownjQuery根据其他下拉列表的选定值禁用其他下拉列表值
【发布时间】：2016-07-05 01:01:06
【问题描述】：

我的网站中有 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 更新https://jsfiddle.net/k7krx87L/4/

提前致谢！

【问题讨论】：

请提供迄今为止已完成工作的 PLUNKR。
@SatejS 这是一个 jsfiddle jsfiddle.net/k7krx87L/1
这应该有助于stackoverflow.com/questions/2155909/…

标签： javascript jquery html drop-down-menu

【解决方案1】：

试试这个，效果很好。

<!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>

【讨论】：

【解决方案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>

希望这会对你有所帮助。

【讨论】：

哇，这看起来像很多相对简单的代码，我会尝试一下并尝试理解:)

【解决方案3】：

您将使用以下选择器：

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

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

【讨论】：

这应该很有帮助。
但是如何使 gt(4) 中的 4 动态化？
声明一个变量var index = [calculate your index here, or hardcoded];$("#input_1_6 option:gt("+index+")").prop("disabled", true);
这个我试过了，好像不行，很遗憾
@MaposaTakalani 你能看看我的小提琴，看看我如何解决我的问题，它只有在你第一次选择一个值时才有效。当你想切换值时它不起作用jsfiddle.net/k7krx87L/5