javascript - 有没有一种简单的方法来进行 HTML 关系选择？-6ren

javascript - 有没有一种简单的方法来进行 HTML 关系选择？

转载作者：可可西里更新时间：2023-11-01 13:42:35

24

4

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

例如:

tag1 tag2 tag3 tag4 开头都是空的；
tag1 是用选项 2 选择的；
tag2, 3, 4:option: 1, 3, 4(option 2被移除)；
tag2是用option 1选择的；
tag3, 4: option: 3, 4 (option 1 被移除);
tag3是用option 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>

最佳答案

始终保留这四个选项会更加用户友好。

如果用户在 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>

关于javascript - 有没有一种简单的方法来进行 HTML 关系选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52922444/

24

4

0

文章推荐： php - 使用 php 通过 Twitter API 发布图像 + 状态

文章推荐： php - 为什么在 for 循环的条件下调用函数不好？

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

首页

博学

6Ren·AI

商城

javascript - 有没有一种简单的方法来进行 HTML 关系选择？