Menu
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>
405
asked Jan 01 '26 22:01
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
