Question

有4个选择标签，每个选择都有4个选项，分别是1、2、3、4。现在，如果我随机选择一个标签，则应减少其他标签的选项。

例如：

tag1 tag2 tag3 tag4开头都是空；

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>

Answer 1

始终保留这四个选项将更加人性化。

如果用户在player3中选择了已在player1中使用的选项（例如），则只需重置player1。

这也大大简化了您的代码。

将removeOption替换为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>

有没有简单的方法可以进行HTML关系选择？

1 个答案: