Javascript 动态添加选择框_Javascript

Javascript 动态添加选择框

javascript

Javascript 动态添加选择框,javascript,Javascript,我制作了一个简单的动态表单来生成输入框 <body> <div id="main1"> <input type="button" onclick="addSelectBox ()" name="clickme" value="+"/> <input type="button" onclick="removeSelect();" value="-"/> <input type="button" onclick="xml

我制作了一个简单的动态表单来生成输入框

<body>
    <div id="main1">
        <input type="button" onclick="addSelectBox ()" name="clickme" value="+"/>
<input type="button" onclick="removeSelect();" value="-"/>

<input type="button" onclick="xmlData();" value="XML" />

    </div>
    <div id="main">
    </div>

  </body>

下面是javascript代码：

 (function () { 

var selele=0;
    var brindex=0;
   function addSelectBox() {

    selele = selele + 1;
    var spantag = document.createElement("span");
    spantag.setAttribute("id", selele);

    var parentDiv = document.getElementById("main");
    var selectElement = document.createElement("select");
    var selectElement1 = document.createElement("select");
    var selectElement2 = document.createElement("select");
    var selectElement3 = document.createElement("select");

    var arr = new Array("Stocks", "MutualFunds");
    var arr2 = new Array("individual", "401k", "IRA");
    var arr3 = new Array("contains", "equals");
    var arr4 = new Array("scrapedaccounttype", "scrapedtransactiontype");
    var textbox = document.createElement('input');

    for (var i = 0; i < arr.length; i++) {
        var option = new Option(arr[i]);
        selectElement.options[selectElement.options.length] = option;


    }


    for (var i = 0; i < arr2.length; i++) {
        var option = new Option(arr2[i]);
        selectElement1.options[selectElement1.options.length] = option;


    }

    for (var i = 0; i < arr3.length; i++) {
        var option = new Option(arr3[i]);
        selectElement2.options[selectElement2.options.length] = option;


    }
    for (var i = 0; i < arr4.length; i++) {
        var option = new Option(arr4[i]);
        selectElement3.options[selectElement3.options.length] = option;


    }



    spantag.appendChild(selectElement);
    spantag.appendChild(selectElement1);
    spantag.appendChild(selectElement2);
    spantag.appendChild(selectElement3);
    spantag.appendChild(textbox);


    parentDiv.appendChild(spantag);
    linebreak();

};
 function removeSelect() {
    var parentDiv = document.getElementById("main");
    var removetg = document.getElementById(selele);
    if (selele != 1) {
        parentDiv.removeChild(removetg);
        selele = selele - 1;


    } else {
        parentDiv.removeChild(removetg);
        parentDiv.innerHTML = "";
        selele = selele - 1;
    }
    removeBreak();
};

 function linebreak() {

    brindex = brindex + 1;
    var brtag = document.createElement("br");
    brtag.setAttribute("id", brindex);
    var parentDiv = document.getElementById("main");
    parentDiv.appendChild(brtag);
};
 function linespace() {

    var myElement = document.createElement("span");
    myElement.innerHTML = "&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp";
    var parentDiv = document.getElementById("main");
    parentDiv.appendChild(myElement);
};
 function removeBreak() {
    var myElement = document.getElementById(brindex);
    var parentDiv = document.getElementById("main");
    brindex = brindex - 1;
    parentDiv.removeChild(myElement);
};
 function xmlData() {


    xmlDoc = loadXMLDoc("data.xml");

    newel = xmlDoc.createElement("edition");

    x = xmlDoc.getElementsByTagName("span")[0];
    x.appendChild(newel);

};

 });

（函数（）{
var selele=0；
var-brindex=0；
函数addSelectBox（）{
selle=selle+1；
var spantag=document.createElement（“span”）；
spantag.setAttribute（“id”，selle）；
var parentDiv=document.getElementById（“main”）；
var selectElement=document.createElement（“选择”）；
var selectElement1=document.createElement（“选择”）；
var selectElement2=document.createElement（“选择”）；
var selectElement3=document.createElement（“选择”）；
var arr=新数组（“股票”、“共同基金”）；
var arr2=新数组（“个人”、“401k”、“IRA”）；
var arr3=新数组（“包含”、“等于”）；
var arr4=新数组（“scrapedaccounttype”、“scrapedtransactiontype”）；
var textbox=document.createElement（'input'）；
对于（变量i=0；i


我不能让它在JSFIDLE上工作，按钮不能工作
如果我把它嵌入到标签中，它们就可以正常工作
谁能帮我修一下吗
编辑：我想我是匿名添加的，因为我希望所有这些函数都使用var selle和brindex

我已经修改了代码
您的函数位于匿名函数中，因此无法从外部访问
首先从匿名函数中删除代码（请参见此处：），然后修复您得到的控制台错误（我假设这不是全部代码）
在你的小提琴中，你选择了onload，但你将onload改为no-warp In或no-warp In，现在一切正常了
是的，请看我答案中的小提琴，这将让你开始。另外，请注意控制台错误，这里有一些未定义的内容。（selle
？）嗨，事实上我忘了在小提琴中添加selle，你能看到我在问题和问题代码块中的编辑，并给我相应的建议吗？是的，但你能建议我如何使用onload（）实现这一点吗
    function addSelectBox() {...