Removing options from subsequent select lists once they are selected - php

Question

I am using a stats app that will attach players (obtained from data within a database) to particular positions. I want players to disappear from being selected in forthcoming positions if they have already been selected so that the same player cannot be put in two separate positions. Can anyone suggest what to do here
This is the code, which i have summarised
<div class="row">
<div class="col-sm-4">
<label>1. Goalkeeper</label>
</div>
<div class="col-sm-4">
<select class="form-control">
<option value="" disabled selected>Select player</option>
<?php
include('conn.php');
$selectplayer= "SELECT * from panel";
$playerresult=$conn->query($selectplayer);
if(!$playerresult){
echo $conn->error;
}
while ($select=$playerresult->fetch_assoc()){
$identify=$select['id'];
$name=$select['name'];
echo "<option>$identify. $name</option>";
}
?>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>2. Right corner back</label>
</div>
<div class="col-sm-4">
<select class="form-control">
<option value="" disabled selected>Select player</option>
<?php
include('conn.php');
$selectplayer= "SELECT * from panel";
$playerresult=$conn->query($selectplayer);
if(!$playerresult){
echo $conn->error;
}
while ($select=$playerresult->fetch_assoc()){
$identify=$select['id'];
$name=$select['name'];
echo "<option>$identify. $name</option>";
}
?>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<label>3. Full back</label>
</div>
<div class="col-sm-4">
<select class="form-control">
<option value="" disabled selected>Select player</option>
<?php
include('conn.php');
$selectplayer= "SELECT * from panel";
$playerresult=$conn->query($selectplayer);
if(!$playerresult){
echo $conn->error;
}
while ($select=$playerresult->fetch_assoc()){
$identify=$select['id'];
$name=$select['name'];
echo "<option>$identify. $name</option>";
}
?>
</select>
</div>
</div>

Answer 1

Create a datalist with your players, and JQuery to remove from it when selected one using onchange() on the input:
function resetPlayerList(pos) {
//Get player name
var player = $('input#' + pos).val();
//If player exists in datalist
if($('option[value="' + player + '"]')) {
//Remove player from datalist meaning other inputs cannot add the player
$('option[value="' + player + '"]').remove();
}
//If changing a player, you need to add the old player back into the datalist. This code does not do that for you.
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<datalist id="players">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<!-- etc. -->
</datalist>
<input id="CF" onchange="resetPlayerList('CF')" list="players"> <!-- Center Forward -->
<br/><br/>
<input id="LW" onchange="resetPlayerList('LW')" list="players"> <!-- Left Wing -->
This will remove the player from the list using JavaScript/JQuery.
If you want to change a player after adding them in, you will need to do more work, to first re-add the old set player back to the datalist, before removing the new player from it... does that make sense?
UPDATE
<datalist id="players">
<?php
$players = array(
array(
'name' => 'Player 1'
),
array(
'name' => 'Player 2'
)
);
//$players should be your array/object of players from SQL.
for($players as $player) {
echo '<option value="' . $player['name'] . '" />'; //or $player->name if object
}
?>
</datalist>