Question

我使用javascript在jsp页面中动态生成一些选择。代码工作正常。但我有一个问题，不知道如何处理它。嗯，这是javascript代码：

 $('#addRow').click(function(){

        i++;

        //stuff categories
        var categoriesStr = '${stuffCategoriesListStr}';
        categoriesStr = categoriesStr.replace('[', '');
        categoriesStr = categoriesStr.replace(']', '');
        var categoriesList = categoriesStr.split(', ');

        var selectCategoriesHtml = "<select id='category"+i+"' style='width: 200px;' onchange=\"retrieveUrlAjax('ajaxstuff.action?category='+this.value, 'menusCombobox"+i+"')\"><option value='-1'>-- Select category --</option>";

        for (j = 0; j < categoriesList.length; j++) {

            var option = "<option value='"+categoriesList[j]+"'>"+categoriesList[j]+"</option>";
            selectCategoriesHtml += option;
        }

        selectCategoriesHtml += "</select>";
        //end os stuff categories

        //units list
        var unitsStr = '${unitsListStr}';
        unitsStr = unitsStr.replace('[','');
        unitsStr = unitsStr.replace(']','');
        var unitsList = unitsStr.split(', ');            

        var selectUnitsHtml = "<select id='unit+"+i+"' style='width: 200px;'><option value='-1'>-- Select unit --</option>";

        for (j = 0; j < unitsList.length; j++) {

            var option = "<option value='"+unitsList[j]+"'>"+unitsList[j]+"</option>";
            selectUnitsHtml += option;
        }

        selectUnitsHtml += "</select>";
        //end of units list

        var d = document.getElementById("fields");
        d.innerHTML += "<table width='100px'>\n\
                            <tr>\n\
                                <td>"+selectCategoriesHtml+"</td>\n\
                                <td width='100px;'><div class='menusCombobox"+i+"'><select style='width: 200px;'/></div></td>\n\
                                <td width='1%'><input type='text' style='width: 40px;' id='"+i+"' value='1'/></td>\n\
                                <td width='200px'>"+selectUnitsHtml+"</td>\n\
                            </tr>\n\
                        </table>";
    });

这就是div：

 <div id="fields"></div>

结果：

1个屏幕：http://img199.imageshack.us/img199/4662/screenshot1hrpl.png

2屏幕：http://img827.imageshack.us/img827/5717/screenshot2hn.png

问题在于，当我在第一行中选择某些内容，然后添加另一行时，将重置所选第一行中的所有数据。您可以在第一个和第二个屏幕中看到这一点。我认为问题出在innerHTML中，但我还没有找到其他选择。也许你们可以帮助我。

Answer 1

我认为导致问题的是innerHTML，请看一下这个问题 -

Is it possible to append to innerHTML without destroying descendants' event listeners?

当您使用jQuery时，您可以使用append或after之类的内容吗？

JavaScript在JSP中无法正确生成HTML

1 个答案: