Question

This page will have 16 dropdown boxes, when I select an item from each of them, I’d like it to be removed from all the others.

This is for a football lineup page, if that helps you picture the scenario.

I hope this isn’t too vague and I’m clear in what I’m struggling with.

Thanks 🙂

I am using in the whole project: HTML, PHP, Javascript, AJAX

<select name="pl1">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select name="pl2">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select name="pl3">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select name="pl4">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

Answer 1

Javascript solution:

function check() {
  d=document;
  myArray = [];
  for (h=0;h<4;h++) {
    myArray[h] = d.getElementById('pl'+(h+1)).value;
  }
  for (a=0;a<4;a++) {
    for (b=1;b<5;b++) {
    d.getElementById('pl'+(a+1)).options[b].style.display = "block";
      for (c=0;c<4;c++) {
        if(d.getElementById('pl'+(a+1)).options[b].value == myArray[c]) {
          d.getElementById('pl'+(a+1)).options[b].style.display = "none";
        }
      }
    }
  }
}

HTML:

<select id="pl1" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select id="pl2" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select id="pl3" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select id="pl4" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

Make sure you use id and not name on your select’s