Question

我有一对<form>，其中有多对<select>'s都使用同一组<option>'s，但我想确保用户不会选择相同的选项集任何一对。任何给定对中的选择的组合值不应在别处使用。可以动态添加或删除对，如果任何2对相同，则它们无法提交表单。 A1＆amp; B1是一对，A2＆amp; 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

使用类来表示集合。然后，您可以更频繁地遍历集合，如列和行，而不是ids。

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>

检测和/或防止重复的选择值

1 个答案: