如何防止 Javascript 更新整个控件，并刷新内容？答案

【问题标题】：How to prevent Javascript updating entire control, and refreshing content?如何防止 Javascript 更新整个控件，并刷新内容？
【发布时间】：2012-04-17 14:44:10
【问题描述】：

我有这个代码：

function addFormControls() {
    var e = document.getElementById("ProductsList");
    var prodid = e.options[e.selectedIndex].value;
    var prodvalue = e.options[e.selectedIndex].text;
    if (num == 0) {
        document.getElementById("ProductsPanel").innerHTML = '<h3>Products added to Variant</h3>';
    }
    if (num < 10) {
        var boolCheck = checkArrayData(prodid);
        if (boolCheck == false) {
            document.getElementById("ProductsPanel").innerHTML = document.getElementById("ProductsPanel").innerHTML + prodvalue + '<input type="text" id="' + prodid + 'product" value="0" width="50px" maxlenght="2" /><input type="button" onclick="updateArrayData(\'' + prodid + '\', document.getElementById(\'' + prodid + 'product\').value);" value="Update Number" /><br />';
            num++;
            prodIdArray.push({
                'key': prodid,
                'value': prodvalue,
                'num': 0
            });
            document.getElementById("productsArray").value = prodIdArray;
        } else {
            alert("Sorry product has already been added!");
        }
    }
}

它很高兴地用新信息更新了一个 div 标签，但是如果你查看它在屏幕上打印一个文本框的部分，第 13 行，这些文本框将由用户更新。

简而言之，添加文本框，并更新值。

但是如果有一个值为 5 的文本框，那么再次调用这个函数来添加另一个文本框，之前文本框的值将被清除干净！

那么，我该如何防止这种情况发生，我是否必须做一些事情，for 循环遍历 div 控件获取值，然后在调用此函数后将它们放回去？！？

【问题讨论】：

num 来自哪里？你已经标记了 jQuery 但似乎没有在任何地方使用它？ maxlenght 拼写错误...我完全不知道您要做什么...您可以创建一个带有问题示例的jsfiddle.net 吗？
数字 5 对您的代码没有重要价值。你能设置一个jsfiddle吗？我试过了，如果没有更多信息就无法重现。
它在我自己的html页面中工作，由于某种原因它在jsfiddle中不起作用

标签： javascript forms controls updating

【解决方案1】：

在添加控件之前，我创建了一些 javascript 以将所有值保存在特定输入的值字段中，然后将所有保存的值返回到它们所尊重的输入。

    function saveValuesOfProducts()
{
    // initialise the array
    numOfProds = new Array();
    // get all the elements which are inputs
    var x=document.getElementsByTagName("input");
    // remove all un necessary inputs
    x = leaveTextInputs(x);
    // loop through the entire list of inputs left saving their value
    for (i=0; i<x.length; i++)
    {
        numOfProds.push(x[i].value);
    }
}
function returnValuesOfProducts()
{
    // get all the elements which are inputs
    var x=document.getElementsByTagName("input");
    // remove all un necessary inputs
    x = leaveTextInputs(x);
    // loop through the entire list of saved values and return them to the input
    for (i=0; i<numOfProds.length; i++)
    {
        x[i].value = numOfProds[i];
    }
}

function leaveTextInputs(value)
{
    // create a new blank array
    var newArr = new Array();
    // loop through all the elements in passed array
    for (i=0; i<value.length; i++)
    {
        // cache the element
        var thevalue = value[i];
        // check if the element is a text input
        if (thevalue.type == "text")
        {
            // check the id consists of product in it!
            var regexteststring = thevalue.id;
            // create the pattern to match
            var patt1 = /product/i;
            if (regexteststring.match(patt1) == "product")
            {
                // as additional check, if it has a size quantity of 2 then its defo out stuff
                if (thevalue.size == 2)
                {
                    newArr.push(thevalue);
                }
            }
        }
    }
    // now return the new array
    return newArr;
}

【讨论】：