Question

我正在构建一个表单，我可以将其用于用户可以从表单中添加或删除最多三辆车的位置。他们可以为每辆车挑选一年制造和型号。然而，当您选择三辆车然后将其更改为两辆车时，如果您已经定义了第二辆车，然后从三辆变为两辆，则重置第二辆车。理论上它不应该。它应该删除第三辆车。

我知道必须有一些我错过或做错的事情。我很确定它与创建/移除额外车辆的方式有关。但我不太确定。

    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/

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

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

Answer 1

由于以下行

，这是正在发生的事

$('.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++)

Answer 2

在你的代码中你删除了除第一个（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)
        }
    });
});

使用.change on下拉选择器输入表单，动态创建的选项无法正常工作

2 个答案: