使用每个额外的DIV

时间:2016-04-30 16:16:46

标签: javascript forms select filter options

我有一个表单,特别是一个表单按钮,使用onclick添加新的表单元素,标签和具有不同选项的select元素。表单元素设置在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>

我正在考虑将阵列滤镜设置为某种条件,但我不确定如何在之前的所有&#39; div中过滤相同的数组。我是否在正确的轨道上?

1 个答案:

答案 0 :(得分:1)

在脚本结束时添加第二个函数调用,删除&#39; counter -1&#39;指向的条目。如果计数器+ = 1表示指向下一个项目,则将该代码移动到上一个要完成的工作,在更新数据库之后。您的提醒&#39;关于计数器限制也应重置计数器变量。 请记住,您创建了一系列事件。如果您始终将第一个功能初始化为&#39; 0&#39;,则可以最后检查计数器溢出 顺序是:

1)在函数调用();初始关键变量

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

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

4)检查溢出


5)退出