檢測和/或防止重複的選擇值

Question

我有一個<form>多對<select>'s都使用相同的<option>'s集，但我想確保用戶不會選擇任何對的同一組選項。任何給定對中選擇的組合值不應該用於其他地方。對可以動態添加或刪除，如果任何2對相同，他們就不能提交表單。 A1 & B1是一對，A2 & B2是一對，依此類推。至於何時檢查，我認爲提交將是最好的。

我採取這種方法之前，我意識到這是做這件事的可怕的方式...

var selects = []; 

$('#col1 select').each(function(){ 
    var index = $(this).parent().attr('id').substring(1); 
    var value1 = this.value; 
    var value2 = $('#b' + index + ' select').val(); 
    var entry = value1+value2; 
    selects.push(entry); 
}); 

// loop through selects looking for duplicates 

這裏是有問題的HTML ...

* { 
 
    box-sizing: border-box; } 
 
    
 
#column1, 
 
#column2 { 
 
    display: inline-block; 
 
    vertical-align:top; 
 
    width: 49%;} 
 
    
 
#column1 div, 
 
#column2 div { 
 
    display:block; 
 
    width:100%; 
 
    margin-bottom: 10px; 
 
    padding-bottom: 10px; 
 
    border-bottom: 1px solid black;}

<div id="column1"> 
 
    <div id="a1"> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
    </select> 
 
    </div> 
 
    <div id="a2"> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
    </select> 
 
    </div> 
 
    <div id="a3"> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
     <option value="3">3</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div id="column2"> 
 
    <div id="b1"> 
 
    <select> 
 
     <option value="alpha">alpha</option> 
 
     <option value="bravo">bravo</option> 
 
     <option value="charlie">charlie</option> 
 
    </select> 
 
    </div> 
 
    <div id="b2"> 
 
    <select> 
 
     <option value="alpha">alpha</option> 
 
     <option value="bravo">bravo</option> 
 
     <option value="charlie">charlie</option> 
 
    </select> 
 
    </div> 
 
    <div id="b3"> 
 
    <select> 
 
     <option value="alpha">alpha</option> 
 
     <option value="bravo">bravo</option> 
 
     <option value="charlie">charlie</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 1

使用類別來表示集合。然後，您可以更一般地遍歷集合，作爲列和行，而不是通過ID。

function getPairs(){ 
 
var pairs = []; 
 
var cols = $('.col'); 
 
var rows = $('.row',cols[0]); 
 
//iterate through row i of each column 
 
for(var r = 0; r < rows.length; r++){ 
 
    var val = ""; 
 
    for(var c = 0; c < cols.length; c++){ 
 
     val += $('.row select',cols[c])[r].value; 
 
    } 
 
    pairs.push(val); 
 
} 
 
return pairs; 
 
} 
 

 
$("#btn").click(function(){ 
 
    console.log(getPairs()); 
 
}); 
 
//console.log(getPairs());

* { box-sizing: border-box;} 
 

 
/* hack to fix console overlapping content of snippet result*/ 
 
div.as-console-wrapper { position: initial; } 
 

 
.col { 
 
    display: inline-block; 
 
    width: 49%; 
 
    vertical-align:top;} 
 
    
 
.row { 
 
    display: block; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    padding-bottom: 10px; 
 
    border-bottom: 1px solid black;} 
 
    
 
select, 
 
option { 
 
    display: block; 
 
    width: 100%:}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="column1" class="col"> 
 
    <div id="a1" class="row"> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    </div> 
 
    <div id="a2" class="row"> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    </div> 
 
    <div id="a3" class="row"> 
 
    <select> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div id="column2" class="col"> 
 
    <div id="b1" class="row"> 
 
    <select> 
 
     <option value="alpha">alpha</option> 
 
     <option value="bravo">bravo</option> 
 
    </select> 
 
    </div> 
 
    <div id="b2" class="row"> 
 
    <select> 
 
     <option value="alpha">alpha</option> 
 
     <option value="bravo">bravo</option> 
 
    </select> 
 
    </div> 
 
    <div id="b3" class="row"> 
 
    <select> 
 
     <option value="alpha">alpha</option> 
 
     <option value="bravo">bravo</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<p><input type="button" id="btn" value="Log Result" /></p>