非重复性下拉选择

Question

我有4个选择下拉列表，我希望每个选择都不重复或不能选择两次。

第1步 - 如果我从DROPDOWN 1中选择两个，则应禁用其他3下拉菜单中的所有第二个选择。

第2步 - 如果我从DROPDOWN 2中选择一个，则应禁用其他3下拉菜单中的所有第一个选择，并且应禁止DROPDOWN 1的第一个选择。

第3步 - 如果我从DROPDOWN 3选择三个，从其他3下拉列表中所有的选择号3应被禁用，并从DROPDOWN 1中的第一，第二选择和2应该保持禁用。

步骤4-如果我从DROPDOWN 4中选择四个，则应该禁用从另一个3下拉列表中的所有选择数字四，并且应该保持DROPDOWN 1,2和3的第一，第二，第三选择被禁用。

但问题是，如果在步骤3中，第一个选择启用，其中它假设被禁用。 因为我并不擅长JavaScript，它让我头疼了将近5天，但仍然没有运气。 希望任何人都可以帮我解决我的问题。

$('select').change(function() { 
 

 
    $(this) 
 
     .siblings('select') 
 
     .children('option[value=' + this.value + ']') 
 
     .attr('disabled', true) 
 
     .siblings().removeAttr('disabled'); 
 

 
});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<label>DROPDOWN 1</label> 
 
<select name="select1"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select><br> 
 
<label>DROPDOWN 2</label> 
 
<select name="select2"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select><br> 
 
<label>DROPDOWN 3</label> 
 
<select name="select3"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select><br> 
 
<label>DROPDOWN 4</label> 
 
<select name="select4"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select>

Answer 1

$(document).ready(function() { 
 
$('select').on('change', function() { 
 
    selected = []; 
 

 
    $('select').each(function() { 
 

 
     if ($(this).val() !== "No Match") 
 

 
      selected.push($(this).find('option:selected').val()); 
 

 
    }); 
 
    console.log(selected); 
 

 
    $('select').children().each(function(index) { 
 

 
     if ($.inArray($(this).val(), selected) !== -1) { 
 
      $(this).attr('disabled', true); 
 

 
     } else { 
 
      $(this).attr('disabled', false); 
 
     } 
 
    }); 
 
}); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label>DROPDOWN 1</label> 
 
<select name="select1"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select><br> 
 
<label>DROPDOWN 2</label> 
 
<select name="select2"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select><br> 
 
<label>DROPDOWN 3</label> 
 
<select name="select3"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select><br> 
 
<label>DROPDOWN 4</label> 
 
<select name="select4"> 
 
    <option>No Match</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select>

这里是想法 - >在每个下拉变化，itterate通过所有的下拉列表中，包括电流，和（重新）建立的选择的选项阵列然后迭代每个孩子（选项），并相应地设置属性。

$('select').on('change', function() { 
    selected = []; 

    $('select').each(function() { 

     if ($(this).val() !== "No Match") 

      selected.push($(this).find('option:selected').val()); 

    }); 
    console.log(selected); 

    $('select').children().each(function(index) { 

     if ($.inArray($(this).val(), selected) !== -1) { 
      $(this).attr('disabled', true); 

     } else { 
      $(this).attr('disabled', false); 
     } 
    }); 
}); 

演示：https://jsfiddle.net/g3t3v22o/

附：需要重新创建阵列，以防用户改变主意（虽然他可以做到，但还有一些选择）。查看console.log，看看选中的数组是如何改变的，在这个过程中...