非重複性下拉選擇

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，看看選中的數組是如何改變的，在這個過程中...