0

我正在构建一个表单，我将它放在用户可以从表单中添加或删除最多三辆汽车的地方。他们可以在其中为每辆车选择一年的品牌和型号。但是，当您选择三辆汽车然后将其更改为两辆汽车时，如果您在从三辆更改为两辆之前已经定义了第二辆汽车，则会重置第二辆汽车。理论上它不应该。它应该只移除第三辆车。

我知道一定有我遗漏或做错的事情。我很确定这与创建/移除额外车辆的方式有关。但我不太确定。

    var total = $(this).val(); 
    //remove all
    $('.vehicleData').each(function(index)
    {
        if (index !== 0) $(this).remove();
    });
    //create new ones
    for (var i = 2; i <= total; i++)
    {   
        var vehicleTmp = 
            "<tr class='vehicleData'>" +
                "<td colspan='5'>" +
                    "<div class='vehicle'>" +
                        "<label>Vehicle " + i +": </label>" +
                        "Year: " + 
                        "<select name='year" + i + "' class='year' id='year" + i + "' size='1'>" +
                            "<option selected='selected' value=''>-- All Years --</option>" +                       
                        "</select> " + 
                        "Make: " +
                        "<select name='make" + i + "' class='make' id='make" + i + "' size='1'>" +
                            "<option value=''>-- All Makes --</option>" + 
                        "</select> " +
                        "Model: " +
                        "<select name='model" + i + "' class='model' id='model" + i + "' size='1'>" +
                            "<option value=''>-- All Models --</option>" + 
                        "</select> " + 
                    "</div>" +
                "</td> " +  
            "</tr>";

        $('.vehicleTable').append(vehicleTmp);

由于缺少与我的 php 文件的连接，它在 JS Fiddle 中有点难以分辨。但是，如果您使用 firebug 来观看控制台中的帖子，它会在您每次在二到三之间切换时调用它们。我希望这一切都足够清楚。

http://jsfiddle.net/empire_eldest/gVgLP/5/

是否有什么我遗漏或做错的事情会导致在更改金额时不会重置已经存在的车辆？任何输入将不胜感激。谢谢！

*注意我知道代码有点乱。我没有机会很好地清理它

4

2 回答 2

0

在您的代码中，您已删除除第一个记录（0 索引）之外的所有记录 - 使用这行代码

$('.vehicleData').each(function(index)
{
    if (index !== 0) $(this).remove();
});

因此，如果要删除最后一条记录，则需要根据您的 html 结构从记录表中删除最后一个表行（tr）。或者，您可以在删除代码之前将数据存储在数组中并设置相同。

检查此代码希望它适合完美

$(document).ready(function () {
    $('#id_NOV').change(function () {
        var total = $(this).val();

        var trs = $('table.vehicleTable tr').length;
        //create new ones

        if(trs > total) {
            do {
                $('table.vehicleTable tr:last').remove();
                trs--;
            } while(trs > total)
        }
        if(trs < total) {
            do{
                var vehicleTmp =
                    "<tr class='vehicleData'>" +
                    "<td colspan='5'>" +
                    "<div class='vehicle'>" +
                    "<label>Vehicle " + (trs + 1) + ": </label>" +
                    "Year: " +
                    "<select name='year" + (trs + 1) + "' class='year' id='year" + (trs + 1) + "' size='1'>" +
                    "<option selected='selected' value=''>-- All Years --</option>" +
                    "</select> " +
                    "Make: " +
                    "<select name='make" + (trs + 1) + "' class='make' id='make" + (trs + 1) + "' size='1'>" +
                    "<option value=''>-- All Makes --</option>" +
                    "</select> " +
                    "Model: " +
                    "<select name='model" + (trs + 1) + "' class='model' id='model" + (trs + 1) + "' size='1'>" +
                    "<option value=''>-- All Models --</option>" +
                    "</select> " +
                    "</div>" +
                    "</td> " +
                    "</tr>";

                $('.vehicleTable').append(vehicleTmp);
                trs++;
            }while(trs < total)
        }
    });
});
于 2013-06-28T19:30:13.563 回答
0

这是因为下面的行而发生的 

$('.vehicleData').each(function (index) {
            if (index !== 0) $(this).remove();
        });

在更改事件时，上一行删除第二和第三辆车（如果它们存在）
现在对于用户将车辆数量从 3 更改为 2 的用例，那么上一行也将删除您不想要的第二辆车。

要使其工作，您应该将您的 if 条件更改为

 if (index > (total-1)) $(this).remove();

并将for循环条件更改为

for (var i = ($('.vehicleData').length+1); i <= total; i++)
于 2013-06-28T18:39:39.210 回答