Is there a simple way to make a HTML relational selection?

There is 4 select tags, each select has 4 options which are 1, 2, 3, 4. Now, if I randomly select one tag, the other tags options should be reduced.

e.g:

tag1 tag2 tag3 tag4 are all empty at beginning;

tag1 is selected with option 2;

tag2, 3, 4: option: 1, 3, 4 (option 2 is removed);

tag2 is selected with option 1;

tag3, 4: option: 3, 4 (option 1 is removed);

tag3 is selected with option 3;

tag4: option 4 (option 3 is removed);

tag4 is selected.

I made it with javascript like that, but problem is...

After all tags were selected, I want to change one of the tag (and again other tags should automatically changed accordingly)..

Is there any better way to do that?

My code:

           function removeOption()
           {
            var p1 = document.getElementById("player1");
            var p2 = document.getElementById("player2");
            var p3 = document.getElementById("player3");
            var p4 = document.getElementById("player4");
            var selections = [];
            selections.push(p1, p2, p3, p4);
    
            //traversal all the selections, if any not empty, remove its values under all other selections
            var selected = [];
            var unselected = [];
            
            for(var i=0;i<selections.length;i++)
            {
                if(selections[i].value!="empty")
                {
                    var x = selections[i].selectedIndex;
                    selected.push(x);
                }
                else
                {
                    unselected.push(selections[i]);
                }
            }//end of for loop
           
            for(var i=0;i<unselected.length;i++)
            {
                unselected[i].remove(selected[selected.length-1]);
            }
           }

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./style.css">
        <script>
        </script>
    </head>
    <body>
        <header>
             <h1>New Players</h1>
        </header>
        <div>
            <form action="./players.php" method="POST">
            Player1: <input type="text" value="Player1">
                <select id="player1" name="player1" onchange="removeOption()">
                    <option value="empty" disabled selected>--Please select--</option>
                    <option value="east">east</option>
                    <option value="south">south</option>
                    <option value="west">west</option>
                    <option value="north">north</option>
                </select>
            <br>
            Player2: <input type="text" value="Player2">
             <select id="player2" name="player2"  onchange="removeOption()">
                    <option value="empty" disabled selected>--Please select--</option>
                    <option value="east">east</option>
                    <option value="south">south</option>
                    <option value="west">west</option>
                    <option value="north">north</option>
            </select>
            <br>
            Player3: <input type="text" value="Player3">
                <select id="player3" name="player3"  onchange="removeOption()">
                    <option value="empty" disabled selected>--Please select--</option>
                    <option value="east">east</option>
                    <option value="south">south</option>
                    <option value="west">west</option>
                    <option value="north">north</option>
                </select>
            <br>
            Player4: <input type="text" value="Player4">
                <select id="player4" name="player4"  onchange="removeOption()">
                    <option value="empty" disabled selected>--Please select--</option>
                    <option value="east">east</option>
                    <option value="south">south</option>
                    <option value="west">west</option>
                    <option value="north">north</option>
                </select>
            <br>
            </form>
        </div>
    </body>
</html>

Solution

It would be more user friendly to keep always the four options.

If the user select an option (e.g.) in player3 that is already in use in player1, just reset player1.

That also simplifies greatly your code.

Replace removeOption with updateOptions(this).

function updateOptions(element) {
  // select all the players but the current one
  var players = document.querySelectorAll("select:not(#" + element.id + ")");
  // iterate just that players
  for (var i = 0; i < players.length; i++) {
    // if the option was already selected
    if (players[i].value == element.value) {
      // just remove it
      players[i].options[0].selected = true;
    }
  }
}

<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <script>
  </script>
</head>

<body>
  <header>
    <h1>New Players</h1>
  </header>
  <div>
    <form action="./players.php" method="POST">
      Player1: <input type="text" value="Player1">
      <select id="player1" name="player1" onchange="updateOptions(this)">
        <option value="empty" disabled selected>--Please select--</option>
        <option value="east">east</option>
        <option value="south">south</option>
        <option value="west">west</option>
        <option value="north">north</option>
      </select>
      <br> Player2: <input type="text" value="Player2">
      <select id="player2" name="player2" onchange="updateOptions(this)">
        <option value="empty" disabled selected>--Please select--</option>
        <option value="east">east</option>
        <option value="south">south</option>
        <option value="west">west</option>
        <option value="north">north</option>
      </select>
      <br> Player3: <input type="text" value="Player3">
      <select id="player3" name="player3" onchange="updateOptions(this)">
        <option value="empty" disabled selected>--Please select--</option>
        <option value="east">east</option>
        <option value="south">south</option>
        <option value="west">west</option>
        <option value="north">north</option>
      </select>
      <br> Player4: <input type="text" value="Player4">
      <select id="player4" name="player4" onchange="updateOptions(this)">
        <option value="empty" disabled selected>--Please select--</option>
        <option value="east">east</option>
        <option value="south">south</option>
        <option value="west">west</option>
        <option value="north">north</option>
      </select>
      <br>
    </form>
  </div>
</body>

</html>