Question

<html>
<head>
    <title>something</title>
    <link rel="stylesheet" href="../../style/global.css">
        <link rel="stylesheet" href="../../style/local.css">
        <link rel="stylesheet" href="../../calendarControl.css">
        <script Language="JavaScript" src="../jscripts/util.js"></script>
    <script language="JavaScript" src="../../calendarControl_modi.js"></script>
    <style>
    input.normal
    {
    text-transform:uppercase;
    }
    </style>
    <script>

    function addBox()
    {   
        //y;
        y=2;
        alert(y);
        var form=document.frm;

        var _items = [ 'NA', 'Storage Device', 'Imaging Device'];

        var label, textbox,lable2,select,div;

        label = document.createElement('label');

        label.appendChild(document.createTextNode('Belonging Type '+y+ ':'));

        select = document.createElement('select');

            for ( var x = 0; x < _items.length; x++ ) 
            {
             _option = document.createElement('option');
             var _text = document.createTextNode(_items[x]);
             _option.appendChild(_text);
             select.appendChild(_option); 
             _option.value = _items[x];
            }

        label2 = document.createElement('label');

        label2.appendChild(document.createTextNode('Belonging '+y+ ':'));

        textbox = document.createElement('input');
        textbox.type = 'text';

        label.appendChild(select);
        label.appendChild(label2);
        label.appendChild(textbox);

        div=document.createElement('div');
        div.appendChild(label);
        document.getElementById('frm').appendChild(div);

        y=y+1;
        alert(y);


        }

        function removeBox() 
        {
        var form = document.frm;
        if (form.lastChild.nodeName.toLowerCase() == 'div')
        form.removeChild(form.lastChild);

        }

        function incrementCount() 
        {
        document.frm.count.value = parseInt(document.frm.count.value) + 1;
        addBox();
        }

        function decCount() 
        {
        document.frm.count.value = parseInt(document.frm.count.value) - 1;
        removeBox();
        }

    </script>

</head>

<body leftmargin="2" topmargin="2" marginwidth="2" marginheight="0" onload="">
<table border = "0" cellspacing="0" cellpadding="0" width = "100%">
            <tr>
                <td class = "normal" align = "left" colspan = "100%" >
                    <!-- Put the Header Image over here-->
                <!--<img src="../../images/ts.gif" width="10%" >-->
                <td>
            </tr>
    </table>
    <!--<img src="../../images/line.bmp" width="100%" height="2">-->

    <form name  = "frm" method = "post" action="" >
    <table>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><input type="hidden" name="count" value="0" readonly ></td></tr>
    <tr>
        <td><a href="javascript:incrementCount();" onclick="" class="underline_small">Add more</a></td>
    </tr>
    <tr>
        <td><a class="underline_small" href="javascript:decCount();" onclick="">Remove<a></td>
    </tr>

</table>
</form>
</body>
</html>

我得到的输出如下

enter image description here

点击删除后我可以删除添加的元素，但是当我再次按下时添加更多y值保持不变我下次要增加时我会点击添加更多它应该显示属于类型3我们如何申请样式动态添加元素，因为我应用于超链接Addmore并删除。

Answer 1

我认为问题是你在y = 2函数中设置了addBox()。将其更改为 y=document.getElementsByName('count')[0].value;

演示：http://jsfiddle.net/pEAH8/

如何使用javascript添加和删除带有标签和样式的选项和文本框的选择框

1 个答案: