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

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>

The output I am getting is as follows 我得到的输出如下

在此处输入图片说明

after clicking on remove I am able to remove added element but when I press again Add more value of y remains same which I want to increment next time when I will click Add more it should show Belonging Type 3 and how can we apply style to dynamically added element as I applied to hyperlink Addmore and remove. 单击删除后，我能够删除添加的元素，但是当我再次按添加时，y的更多值保持不变，当我下次单击添加更多时，我想增加该值，它应该显示属于类型3，以及如何动态应用样式当我应用于超链接Addmore并删除时添加了元素。

Answer 1

I think the problem is that you have set y = 2 inside addBox() function. 我认为问题在于您在addBox()函数中设置了y = 2 。 Change it to y=document.getElementsByName('count')[0].value; 将其更改为y=document.getElementsByName('count')[0].value;

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-08-16 12:11:52

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-08-16 12:11:52

解决方案1
0 已采纳 2012-08-16 12:11:52