验证html选择（javascript或jquery）

Question

我在每一行中有多行3个相等的选择。我正在寻找一种方法，以便连续选择不能重复。

<tr  align='center'>
<input type="hidden" name="codialum[]" value="314" />
<td><input type='text' name='al1[]' id='al1[]' value='Student1' /></td> 
<td> <select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        ...
        ...
     </select>
</td>
<td> <select name="optativa2[]" id="optativa2">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        ...
        ...
     </select>
</td>
<td> <select name="optativa3[]" id="optativa3">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        ...
        ...
     </select>
</td>
</tr>
<tr  align='center'>
<input type="hidden" name="codialum[]" value="315" />
<td><input type='text' name='al1[]' id='al1[]' value='Student2' /></td> 
<td> <select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        ...
        ...

可以在发布后完成，但我想在浏览器中完成。 我做了一些不成功的尝试

由于

Answer 1

也许有点像这样：

// attach a submit handler to your form (I've used a button click
// for this demo because the stack snippet sandbox didn't seem to like
// a form submitting, but you should use form submit)
document.querySelector("button").addEventListener("click", validate);

function validate(e) {
  var allOK = true;
  var rows = document.querySelectorAll("tr");        // get a reference to all rows
  var subjects;

  for (var i = 0; i < rows.length; i++) {            // loop over the rows
    subjects = rows[i].querySelectorAll("select");   // get a reference to the
    if (subjects[0].value === subjects[1].value ||   // selects in the current
        subjects[0].value === subjects[2].value ||   // row and test their values
        subjects[1].value === subjects[2].value) {
      allOK = false;                                 // if they failed, set a class
      rows[i].classList.add("invalid");              // to highlight the row
    } else {                                         // otherwise,
      rows[i].classList.remove("invalid");           // remove class
    }
  }
  if (!allOK) {          // if any row failed display a message
    alert("Please ensure that every student has three different subjects.");
    e.preventDefault();  // prevent default to stop form submission
  }
}

.invalid { background-color: pink; }

<table>
  <tr align='center'>
    <td><input type="hidden" name="codialum[]" value="314" /><input type='text' name='al1[]' id='al1[]' value='Student1' /></td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
  </tr>
  <tr align='center'>
    <td><input type="hidden" name="codialum[]" value="314" /><input type='text' name='al1[]' id='al1[]' value='Student2' /></td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
  </tr>  <tr align='center'>
    <td><input type="hidden" name="codialum[]" value="314" /><input type='text' name='al1[]' id='al1[]' value='Student3' /></td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
    <td><select name="optativa1[]" id="optativa1">
        <option value=43>Opt. Anglès</option>
        <option value=44>Opt. Biologia</option>
        <option value=45>Opt. Maths</option>
        <option value=46>Opt. History</option>
     </select>
    </td>
  </tr>
</table>
<button>Submit</button>

显然，您可以扩展validate()函数以根据需要验证其他内容。

请注意，您的示例HTML无效，因为您在tr中有一个输入元素（隐藏的元素）但在td中有不 - 您应该将其移动到第一个td。