Javascript 基于下拉选择向窗体添加和删除输入标记

因此，正如标题所说，我正试图将输入标记添加到基于下拉选择的表单中。这就是我到目前为止所做的：

HTML格式：

<form action="/next" method="POST" > 
    <select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <div id="count">
        <p>
            <div id="something">
                <input type="text" name="text" value="" >
                <input type="text" name="othertext" value="" >
            </div>
        </p>
        <span id="Room"></span>
    </div>
    <input type="submit" value="Next" >
</form>

1.
2.
3.

然后是我想要的Javascript：

function dropdownlist(listindex) {

    document.Room = 0;
    switch (listindex) {

    case "1":

        var check = document.getElementById('added');
        if (check != null) {

            element = document.getElementById('added');
            element.parentNode.removeChild(element);

            element = document.getElementById('added');
            element.parentNode.removeChild(element);

            element = document.getElementById('added');
            element.parentNode.removeChild(element);


        }

        break;

    case "2":


        var check = document.getElementById('added');
        if (check == null) {

            var counter = 1;

            var newFields = document.getElementById('something').cloneNode(true);
            newFields.id = 'added';
            var newField = newFields.childNodes;
            for (var i = 0; i < newField.length; i++) {

                var theName = newField[i].name
                if (theName) newField[i].name = theName + counter;
            }
            var insertHere = document.getElementById('Room');
            insertHere.parentNode.insertBefore(newFields, insertHere);

        }

        else {
            var id = document.getElementById('count');
            var countid = id.getElementsByTagName('p')
            var number = countid.length;

            if (number == 3) {
                element = document.getElementById('added');
                element.parentNode.removeChild(element);
            }​

    }​

函数dropdownlist（listindex）{
文件室=0；
开关（列表索引）{
案例“1”：
var check=document.getElementById（'added'）；
如果（检查！=null）{
element=document.getElementById（'added'）；
element.parentNode.removeChild（元素）；
element=document.getElementById（'added'）；
element.parentNode.removeChild（元素）；
element=document.getElementById（'added'）；
element.parentNode.removeChild（元素）；
}
打破
案例“2”：
var check=document.getElementById（'added'）；
如果（检查==null）{
var计数器=1；
var newFields=document.getElementById（'something'）.cloneNode（true）；
newFields.id='added'；
var newField=newFields.childNodes；
对于（变量i=0；i

现在这一切都运行得很好，可能有更好的方法可以做到这一点，但由于我对javascript几乎没有经验，这是我所能做到的最好的方法。现在的问题是：如果一个用户添加了3个元素，然后决定返回到2个元素，我必须检查添加了多少标记，这就是我提出的解决方案要求我在div顶部创建的每个元素周围添加一个标记，这样我就可以选择div中的所有标记，然后删除所需数量的标记

这个解决方案很好，但后来我注意到，这与我的代码的早期部分弄乱了，我将每个输入标记的名称更改为唯一的名称，这是我需要在表单中存储信息的东西

---

<> P>请问有人建议我用不同的方法来实现这个功能吗？基于用户选择添加和删除输入标签，同时保持所有标签的唯一名称？任何帮助都将是非常感谢的！

你的输入元素的最大数量很小吗？如果是的话，你可以考虑把所有的元素放在页面上，d然后根据需要启用或设置其可见性：

document.form1.text1.disabled = true;              // or false

document.form1.text1.style.visibility = "hidden";  // or "visible"

这需要首先命名表单和输入元素：

<form name="form1" ... >

<input type="text" name="text1" ... >
<input type="text" name="text2" ... >

---

此方法比通过代码>插入（）/<代码>、<代码> ReaveCub（）/代码>等

> P>您输入的元素的最大数量小得多，如果可以的话，您可以考虑将它们全部放在页面上，然后启用它们或根据需要设置它们的可见性：

document.form1.text1.disabled = true;              // or false

document.form1.text1.style.visibility = "hidden";  // or "visible"

这需要首先命名表单和输入元素：

<form name="form1" ... >

<input type="text" name="text1" ... >
<input type="text" name="text2" ... >

---

这种方法比通过

insertBefore（）

，

removeChild（）

等操作DOM简单得多。

对于函数定义，您的代码似乎至少缺少一个结束符

}

是在我的原始代码中，所以这不会是一个问题。您的代码似乎缺少函数定义的至少一个结尾。

}

。呃，只是一个输入错误，}在我的原始代码中，所以这不会是一个问题。您实际上是绝对正确的，不知道为什么我在走这条路之前没有想到这一点，谢谢！你说得对极了，不知道为什么我在走这条路之前没有想到这一点，谢谢！