使用每个额外的 DIV 从选择元素中删除选项答案

【问题标题】：Remove options from Select Element with each additional DIV使用每个额外的 DIV 从选择元素中删除选项
【发布时间】：2016-04-30 16:16:46
【问题描述】：

我有一个表单，特别是一个表单按钮，通过 onclick 添加新的表单元素、标签和具有不同选项的选择元素。表单元素设置在 div 中。以下是表格的样本。我想做的是，对于每个选择和新的选择框，都是从列表中删除选定的项目，这样它就不是一个选择，也不会被意外输入数据库两次，因为这些选项很多许多关系。我查看了不同的帖子，但找不到我需要的内容。

<!doctype html>
<html>
    <head>
        <title>JS Test</title>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>
        <p id="demo"></p>
        <p id="demo2"></p>
        <h1>Test Javascript</h1>

        <form id="form1">
            <fieldset id="java">
                <legend>Form Append Test</legend>
                <div id="tabelRow"></div>
                <div id="button">
                    <p><input type="button" onclick="myFunction()" value="Click"></p>
                </div>
            </fieldset>
        </form>

        <script type="text/javascript">
            var options = [
                {"value" : "1", "text": "FHA" },
                {"value" : "2", "text": "USDA" },
                {"value" : "3", "text": "VA" },
                {"value" : "4", "text": "Convnetional" },
                {"value" : "5", "text": "Construction" },
                {"value" : "6", "text": "Chattel" },
                {"value" : "7", "text": "Fannie MAE HARP" }
            ];

            var ol = options.length;
            var counter = 0;
            var fs = document.getElementById("java");
            var len = document.getElementById("demo");
            var button = document.getElementById("button");
            var getSelected = document.getElementsByClassName("selection").value;

            function myFunction() {
                var newDiv = document.createElement("div");
                var newLab = document.createElement("label");
                var labText = document.createTextNode("Product " + (counter + 1) + " ");
                var newSelect = document.createElement("select");

                newLab.appendChild(labText);
                newDiv.appendChild(newLab);
                newDiv.appendChild(newSelect);
                newDiv.className = "tablerow test";
                newSelect.className = "selection";

                if (counter == ol) {
                    alert("You have reached the limit of adding " + counter);
                }
                else {
                    for (var i = 0; i < ol; i++) {
                        var proMenu = options[i];
                        newSelect.options.add(new Option(proMenu.text, proMenu.value));
                    }

                    fs.appendChild(newDiv);
                    fs.insertBefore(newDiv, button);
                    counter += 1;
                    document.getElementById("demo").innerHTML = counter;
                    document.getElementById("demo2").innerHTML = getSelected;
                }
            }

        </script>
    </body>
</html>

我正在考虑使用设置为某种条件的数组过滤器，但我不确定如何在所有先前的“div”中过滤相同的数组。我在正确的轨道上吗？

【问题讨论】：

所以您的程序是删除选定的项目，或者删除并复制到缓冲区以与主列表进行比较，或与数据库中的内容进行比较？
所以表格将被填写，并在提交时填充我的数据库。如果我不是很清楚，我很抱歉。因此，当用户填写表单时，每次点击提供的新产品时，他们已经选择的产品都会从新的 div 和选项集中删除（相同的选项，只是与之前选择的产品不同） div）。

标签： javascript forms select filter options

【解决方案1】：

在脚本末尾添加第二个函数调用，该函数调用删除“counter -1”指向的条目。如果 counter +=1 表示指向下一项，则将该代码移至最后一项要完成的工作，在您的数据库更新后。您关于计数器限制的“警报”也应该重置计数器变量。 请记住，您创建了一系列事件。如果您始终将第一个函数初始化为“0”，则可以最后检查计数器溢出。

顺序是：

1）在函数调用（）上；首先初始化关键变量

2）获取所选项目并存储在变量中。保存到数据库。调用下一个函数。

3）删除功能：从列表中删除所选项目（通过索引's1-7.etc）您可以通过将字段复制到正则表达式变量来删除字段，然后使用正则表达式删除该字段中的字符。该列表 ID 号可以用作键。一旦删除，它就会消失，直到您重置整个程序。

4) 检查溢出

5) 退出

【讨论】：