JS动态添加标签并取值

大概意思就是我有两个下拉列表框,select1和select2里边存的是数字1-9我选中select1的值为3 则页面出现3个text然后向其text中输入值 单击按钮 取出text的值..用JS   大神们有好例子么?

解决方案 »

  1.   

    神们... 求求你们了,, Jack~~~~ Help me~~~~~~~`
      

  2.   

    用js拼接text个数，比如页面放一个<label id='lb'></label>
    根据所选select个数for循环lb.innerHtml+=<input type='text' id='text_自定义'/>,然后根据text的不同ID把所有自定义的text值放到一个隐藏的text中用逗号隔开，然后后台split去拿每个值
      

  3.   

    <body>
    <input type="button" value="input取值" onclick="getInputsText();" />
    <select id="curSelect" onchange="selectChanged();" >
    <option></option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
    <option value='5'>5</option>
    </select></body> function selectChanged() {
            //父容器
            var inputParent = document.getElementsByTagName("body")[0];
            var select = document.getElementById("curSelect");
            var selectValue = select.options[select.selectedIndex].value;
            if (selectValue !== "") {
                for (var i = 0; i < selectValue; i++) {
                    var input = document.createElement("input");
                    inputParent.appendChild(input);
                }
            }
           
        }
        //input 取值
        function getInputsText() {
            //父容器
            var inputParent = document.getElementsByTagName("body")[0];
            var inputs = inputParent.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == 'text') {
                    alert(inputs[i].value);
                }
            }
        }
      

  4.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function Produce(val) {
                $("#dvcontent").html(" ");
                arr = [];
                for (var i = 0; i < parseInt(val); i++) {
                    arr.push("<input type='text' class='txtcontent' />")
                }
                $("#dvcontent").html(arr.join(' '));
            }        function Myalert() {
                $(".txtcontent").each(function () { alert($(this).val()); });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <select id="slt1" onchange="Produce(this.value)">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
        </select>
        <div id="dvcontent">
        </div>
        <input type="button" onclick="Myalert()" value="ClickMe" />
        </form>
    </body>
    </html>
    引用Jquery库文件进行操作
      

  5.   

    首先引用jquery脚本：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#sel").change(function () {
                    var shu = $(this).val();
                    $("#in").html(""); //清空里面的值,为了生成指定数量input
                    for (var a = 1; a <= shu; a++) {
                        $("#in").append("<input id='txt" + a + "' type='text' >");
                    }
                });            $("#quzhi").click(function () {
                    var s = $("#in").find('input');
                    for (var b = 0; b < s.length; b++) {
                        alert(s[b].value);
                    }            })
            })        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Text1" type="text" />
        <div>
            <select id="sel">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <div id="in">
            </div>
            <input id="quzhi" type="button" value="取值" />
        </div>
        </form>
    </body>
    </html>
      

  6.   

    首先引用jquery脚本：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#sel").change(function () {
                    var shu = $(this).val();
                    $("#in").html(""); //清空里面的值,为了生成指定数量input
                    for (var a = 1; a <= shu; a++) {
                        $("#in").append("<input id='txt" + a + "' type='text' >");
                    }
                });            $("#quzhi").click(function () {
                    var s = $("#in").find('input');
                    for (var b = 0; b < s.length; b++) {
                        alert(s[b].value);
                    }            })
            })        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Text1" type="text" />
        <div>
            <select id="sel">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <div id="in">
            </div>
            <input id="quzhi" type="button" value="取值" />
        </div>
        </form>
    </body>
    </html>首先引用jquery脚本：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#sel").change(function () {
                    var shu = $(this).val();
                    $("#in").html(""); //清空里面的值,为了生成指定数量input
                    for (var a = 1; a <= shu; a++) {
                        $("#in").append("<input id='txt" + a + "' type='text' >");
                    }
                });            $("#quzhi").click(function () {
                    var s = $("#in").find('input');
                    for (var b = 0; b < s.length; b++) {
                        alert(s[b].value);
                    }            })
            })        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Text1" type="text" />
        <div>
            <select id="sel">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <div id="in">
            </div>
            <input id="quzhi" type="button" value="取值" />
        </div>
        </form>
    </body>
    </html>
    这样的话我第二个select 里选中就把第一个已经插入的东西给清空了, 变成第二个的数据了 如何让他两个同时存在呢?
      

  7.   

    首先引用jquery脚本：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#sel").change(function () {
                    var shu = $(this).val();
                    $("#in").html(""); //清空里面的值,为了生成指定数量input
                    for (var a = 1; a <= shu; a++) {
                        $("#in").append("<input id='txt" + a + "' type='text' >");
                    }
                });            $("#quzhi").click(function () {
                    var s = $("#in").find('input');
                    for (var b = 0; b < s.length; b++) {
                        alert(s[b].value);
                    }            })
            })        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Text1" type="text" />
        <div>
            <select id="sel">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <div id="in">
            </div>
            <input id="quzhi" type="button" value="取值" />
        </div>
        </form>
    </body>
    </html>首先引用jquery脚本：
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="js/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#sel").change(function () {
                    var shu = $(this).val();
                    $("#in").html(""); //清空里面的值,为了生成指定数量input
                    for (var a = 1; a <= shu; a++) {
                        $("#in").append("<input id='txt" + a + "' type='text' >");
                    }
                });            $("#quzhi").click(function () {
                    var s = $("#in").find('input');
                    for (var b = 0; b < s.length; b++) {
                        alert(s[b].value);
                    }            })
            })        
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <input id="Text1" type="text" />
        <div>
            <select id="sel">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
            </select>
            <div id="in">
            </div>
            <input id="quzhi" type="button" value="取值" />
        </div>
        </form>
    </body>
    </html>
    这样的话我第二个select 里选中就把第一个已经插入的东西给清空了, 变成第二个的数据了 如何让他两个同时存在呢?
    这是js操作的 只要页面刷新 这里先添加的几个text都会清空的