Question

我有一个情况，我需要能够动态添加，删除和重置乘客名单，最多10名乘客。

以下是html界面的代码：

<div id="add_passenger">
<br>
<input type="button" id="add_pax" name="add_pax" value="Add Passenger Name" />
<input type="button" id="del_pax" name="del_pax" value="Delete Passenger Name" />
<input type="button" id="reset_pax" name="reset_pax" value="Reset Passenger Name" />

我正在使用jquery添加，删除和重置乘客列表。

以下是我的jquery代码：

$("#add_pax").click(function() {

var limit = $("div[id^='pax_list']").length;
var p = limit + 1;

if ( p < 11 ) {
    $("#add_passenger").append(addPassenger(p));
} else {
    alert("Limit of " + limit + " Passenger Name reached");
}

$("#edit_pax_num").val(limit+1);
});

    $("#del_pax").click(function() {

    var t = $("div[id^='pax_list']").length;

    $("div[id^='pax_list']").each(function() {
        if ($("input[type=checkbox]",this).is(':checked')) {
            if(t > 0) {
                $(this).remove();
                t--;
            }
        } 
    });
});

$("#reset_pax").click(function() {
    $("div[id^='pax_list']").each(function() {
        $(this).remove();
    });
});


function addPassenger(p) {
    var text = "<div id=\"pax_list" + p + "\"><input type=\"checkbox\">&nbsp;<strong>Passenger Name " + p + ":</strong> " +
        "<input id=\"pax_name" + p + "\" class=\"textbox\" type=\"text\" maxlengt=\"100\" style=\"width:300px;\" name=\"pax_name[]\"><br></div>";

    return text;
};

问题是每个乘客列表将在使用pax_list调用的唯一div id下分配，然后是数字。如何通过分配唯一ID来添加，删除和重置乘客列表。

我想到每次用户根据复选框删除列表时，所有存在的乘客名称都将添加到数组中，并且将重新创建整个列表。然后，最后，阵列中的乘客姓名将被放回第一个可用输入。因此，数字将始终从数字1开始。

添加乘客jquery功能将查看最后一个号码，以便能够在达到限制之前添加更多乘客。

如何将乘客名单添加到数组中？

这就是我想要做的事情：

var divPaxList = $("div[id^='pax_list']").length;

    if(divPaxList == 0) {
        alert("There is no Passenger Name listed. Please add Passenger Name.");
    } else {

        $("input[id^='pax_name']").each(function() {

            var paxName = document.getElementsByName("pax_name[]").val;
            var paxArray = $.makeArray(paxName);

            $(paxArray).appendTo("#add_passenger");

        });    
    }

如果有人有更好的解决方案。很抱歉，我非常感谢你的帮助。

Answer 1

这是获取包含多个元素值的数组的一种方法：

var arrayWithFooValues = $('.foo').map(
    function () {
        return $(this).val();
    }
);

Answer 2

这种方式看起来有点像你的版本，因为它循环遍历元素并将每个值添加到数组中。

var arrayWithFooValues = [];
$("input[id^='pax_name']").each(function () {
    arrayWithFooValues.push(
        $(this).val()
    );
});

Answer 3

非常好的脚本，但如果它也会验证字段也会更好，并解释如何从服务器端语言（如php）检索这些文本框值。我在

找到了一个教程

http://www.pradipchitrakar.com.np/blog/dynamically-add-remove-textfield.html

它解释了如何动态添加，删除和验证jquery中的文本字段并获取php和jsp / servlet中textbox的值

jquery，数组和动态添加＆amp;删除文字输入

3 个答案: