javascript - JQuery如何点击html元素复制到文本区域？

Question

是否可以单击列表中的文本以将其添加到文本框中。我制作了一个 JSON api，用于获取数据库中的人员列表。然后我有一个带有文本字段并显示人员列表的表单。我想单击一个特定的人并将其添加到文本框中。

主要.js

    var ajax_call = function() {
      var $people = $('#people');

      $.ajax({
          type: 'GET',
          url: '/all/api',
          success: function(people) {
            $.each(people, function(i, person) {
                $people.empty()
            });
            $.each(people, function(i, person) {
              $people.append('<li>name: ' + person.first_name+', last: '+ person.last_name + '</li>');
            });
          }
        });
      $("#people").on("click", "li", function() {
          var content = $(this).html();
         //$("#testbox").val(content);  //replace existing name in textbox
        $("#testbox").val($("#testbox").val() + content + "\n");  //add new name to textbox
});

    };
    var interval = 800;
    setInterval(ajax_call, interval);

表单.html

<form id="textbox" action="" method="post">{% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="create" />
        </form>

    <ul id="people"></ul>

Answer 1

试试这个附加到 ul 但被 li 过滤的“点击”功能(这允许列表保持动态)，它允许您添加个人名称(两个版本，一个覆盖现有的文本字段信息，第二个附加到它): DEMO

$("#people").on("click", "li", function() {
    var content = $(this).html();
    //$("#testbox").val(content);  //replace existing name in textbox
    $("#testbox").val($("#testbox").val() + content + "\n");  //add new name to textbox
});