Question

我很沮丧应该如何实现这一点，主要是因为我缺乏javascript知识。这是我正在看的代码：

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

结果看起来像这样：

**Responsibility List:**

 - Added responsibility 1
 - Added responsibilty 2

*responsibility field - add button*

任何人都可以解释如何做到这一点，似乎它必须涉及ajax。我真的很感激一些信息，甚至是一个例子。

谢谢。

编辑：这里有一点澄清。我希望将这些数据作为项目列表发送到服务器。我已经看到了这个实现的示例，这是一个屏幕截图： enter image description here

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

Answer 1

这样的事可能吗？

http://jsfiddle.net/VrGau/10/

var $responsibilityInput = $('#responsibilityInput'),
    $responsibilityList = $('#responsibilityList'),
    $inputButton = $('#send'),
    rCounter = 0;

var addResponsibility = function () {
    if(rCounter < 10){
        var newVal = $responsibilityList.val()+$responsibilityInput.val();
        $responsibilityList.val(newVal+'\n');
        $responsibilityInput.val('');
    }
}

$inputButton.click(addResponsibility);

Answer 2

也许这个也可以帮助，这只限制了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('');  
});

在这里试试 http://jsfiddle.net/markipe/ZTuDJ/14/

Answer 3

为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++;
    }
}

http://jsfiddle.net/br0nsk1y/bDE9W/

Answer 4

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

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

http://jsfiddle.net/VrGau/7/

Jquery在不重新加载页面的情况下将项添加到列表中

4 个答案: