有一种简单的方法来做出HTML关系选择?

问题描述 投票:0回答:2
有4个选择标签,每个选择有4个选项,即1、2、3、4。 现在,如果我随机选择一个标签,则应减少其他标签选项。

e.g:

  • tag1tag2 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>

wayer始终保持四个选项,这将更加用户友好。 
如果用户选择一个已在
player3
中已使用的选项(
e.g.

),则只需重置

player1
javascript html
2个回答
1
投票

也简化了您的代码。

取代

player1


removeOption
updateOptions(this)

    
选择关系JS-最佳100%

选择关系JS是一个轻巧的JavaScript库,旨在根据其他相关选择元素的选择值简化HTML选择元素过滤选项的过程。

我写的libray:

https://github.com/deirvlon/select-relations
libraryPath
Https://deirvlon.github.io/select-relations/select-relations.js

Feel免费尝试:


0
投票

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; } } }

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.