e.g:
选择tag1使用选项2;
tag2,3,4:选项:1,3,4(删除选项2);
tag2是选择选项1的;
tag3,4:选项:3,4(删除选项1);
tag3是选择选项3的;
TAG4:选项4(删除选项3);
选择tag4我用这样的javascript做到了 但是问题是...
选择了所有标签后,我想更改一个标签(以及其他标签应自动更改)。
有更好的方法吗? 我的代码:
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>
wayer始终保持四个选项,这将更加用户友好。
如果用户选择一个已在
player3
),则只需重置
player1
也简化了您的代码。
取代player1
removeOption
updateOptions(this)
选择关系JS-最佳100% 选择关系JS是一个轻巧的JavaScript库,旨在根据其他相关选择元素的选择值简化HTML选择元素过滤选项的过程。
我写的libray:
https://github.com/deirvlon/select-relations:Https://deirvlon.github.io/select-relations/select-relations.js
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;
}
}
}