通过单击Link-jQuery填写输入字段

如何使用jquery通过单击输入字段中的文本来填充输入字段

文本是动态生成的，因此无法提前知道值

例如：

<input id="tag" type="text" name="tags" value="">

<p>
    <a class="tag">aaa</a><br/>
    <a class="tag">bbb</a><br/>
    <a class="tag">ccc</a><br/>
    <a class="tag">ddd</a><br/>
    <a class="tag">eee</a>
</p>

但这只会在输入字段中放置一个标记，我需要这样放置

<input id="tag" type="text" name="tags" value="aaa, bbb, ccc, eee">

下面是一个工作示例

---

获取当前值并添加新的：$'tag'.val$'tag'.val+this.innerHTML；您可能希望使用数据数组，甚至将.data添加到元素中，以防止重复添加相同的值。

您可以使用css类跟踪选定的链接，以便也可以删除已添加的链接

$('a.tag').live('click', function(e){

    // toggle selected class
    $(this).toggleClass('selected');

    // make a collection of tags
    var newTag = [];
    $('a.tag.selected').each(function(){

        // add value;
        newTag.push($(this).text());
    });
    $('#tag').val(newTag.join(', '));

    return false;  
});

请参见下面的演示

---

注意：这仅在重复项或链接的点击顺序不重要的情况下有效。

Hello Goran，这正是我所需要的，但是如果我在输入字段中已经有一些标记怎么办？例如，当我单击“新建”时，输入字段中的旧标记将被删除？我只需要填写一个新的…没问题，在HTML标记中的链接生成时将所选类添加到链接中是可行的。像这样-

$('a.tag').live('click', function(e){

    // toggle selected class
    $(this).toggleClass('selected');

    // make a collection of tags
    var newTag = [];
    $('a.tag.selected').each(function(){

        // add value;
        newTag.push($(this).text());
    });
    $('#tag').val(newTag.join(', '));

    return false;  
});