Javascript Jquery在不重新加载页面的情况下向列表添加项目

我非常执着于如何实现这一点，主要是因为我缺乏javascript知识。这是我正在查看的代码：

我想做的是让用户可以在“责任”字段中键入“添加责任”，然后单击“添加”并将其显示在上面的列表中。用户最多可以完成10项职责

结果如下所示：

**Responsibility List:**

 - Added responsibility 1
 - Added responsibilty 2

*responsibility field - add button*

有谁能解释一下这应该怎么做，它似乎必须涉及ajax。如果能提供更多的信息，甚至举个例子，我将不胜感激

多谢各位

编辑：这里有更多的澄清。我希望将此数据作为项目列表发送到服务器。我已经看到了实现该功能的示例，下面是一个屏幕截图：

---

用户在文本框中键入一些内容，然后单击“添加”，然后它将显示在其上方的列表中。此信息是提交到服务器的信息。

为textarea字段添加id

<textarea rows="4" cols="50" placeholder="Responsibilities"  id="resplist"></textarea>Add responsibility<br />
<textarea rows="4" cols="50" placeholder="How to apply" id="inputresp"></textarea>

您需要Jquery。使用这个js代码

var i=0;
$("#send").click(addresp);
function addresp()
{
    if (i<10)
    {
        $("#resplist").val($("#resplist").val()+$("#inputresp").val()+'\n');
        $("#inputresp").val("");
        i++;
    }
}

---

这取决于是否要将数据发布到服务器。如果只有在客户端，您才能这样做

$("#send").on("click", function(event){
    if($("#list li").size() < 10){
        $("#list").append("<li>" + $("#responsibilities").val() + "</li>");
    }
});

---

大概是这样吧

---

也许这一条也有帮助，这只限制了10个列表

var eachline='';
$("#send").click(function(){
   var lines = $('#Responsibilities').val().split('\n');
   var lines2 = $('#Overview').val().split('\n');
   if(lines2.length>10)return false;
   for(var i = 0;i < lines.length;i++){
      if(lines[i]!='' && i+lines2.length<11){
       eachline += '- Added ' + lines[i] + '\n';
      }    
   }
   $('#Overview').text(eachline);
   $('#Responsibilities').val('');  
});   

在这里试试

---

首先，这里有一种方法可以将项目添加到您的列表中，该列表是您案例中的文本区域。您可能希望使用禁用的select元素，这样您就可以轻松地计算现有的子项，而无需太多麻烦…您希望有一个表单，当他们单击“添加”按钮时，可以动态添加要键入职责的文本字段数？我想我还没有很好地解释自己。我想使用一个文本区域将项目添加到列表中，然后将其作为表单的一部分提交。字段旁边的添加按钮将文本区域值添加到列表中。感谢您的回复。我试图编辑我最初的帖子来解释我所追求的。您的代码似乎在文本区域中添加了详细信息，而实际上文本区域仅用于键入值，然后单击“添加”按钮时，字段中的值以列表格式显示在其上方。这是提交到服务器的内容。感谢您的帮助，但我确实希望将其发送到服务器。我已经用更多的信息更新了我的问题，希望能得到澄清。谢谢你的帮助，但这并不完全正确。我试图用更多的澄清来改进我的问题。实际上，我认为这个答案很接近，但它把它放在文本框中，而不是放在上面

var eachline='';
$("#send").click(function(){
   var lines = $('#Responsibilities').val().split('\n');
   var lines2 = $('#Overview').val().split('\n');
   if(lines2.length>10)return false;
   for(var i = 0;i < lines.length;i++){
      if(lines[i]!='' && i+lines2.length<11){
       eachline += '- Added ' + lines[i] + '\n';
      }    
   }
   $('#Overview').text(eachline);
   $('#Responsibilities').val('');  
});