我们如何使用 Jquery tagit 获取所选标签的 ID? [英] How we can get the ID of selected tags using Jquery tagit?

问题描述

我有一个输入标签字段，我想获取所选标签的 ID所以我尝试了 http://jsfiddle.net/u8zj5/19/ 但我想解决的问题获取 id 而非标签或值传递给 id="show" 但我失败了.

I have a input tag field ,and I want to get the ID of the selected tages So I have try http://jsfiddle.net/u8zj5/19/ But my problem I want to get the id not label or value to pass into id="show" but I failed.

<input type="text" id="field1" name="field1" value=""/>
<span id="show">show ID here</span>

jQuery(document).ready(function(){
var availableTags = [{"id":"144","label":"Allicelabel","value":"Allice value"}];
jQuery("input#field1").each(function(){
    var target = jQuery(this);
    var currenttags = target.val();
    target.hide()        
          .after("<ul class="tags"><li>"+currenttags+"</li></ul>");
    var instance = target.next();
    instance.tagit({
        tagSource:availableTags,
        tagsChanged:function () {
            var tags = instance.tagit('tags');
            var tagString = [];
            for (var i in tags){
                tagString.push(tags[i].value);
            }
            $("#show").html(tagString.join(','));
        },
        sortable:true,
        triggerKeys: ['enter', 'comma', 'tab']
    });
});

});

任何使用过 jQuery Tagit (Demo Page) 的人都可以帮我解决这个问题

Anyone here that used jQuery Tagit (Demo Page) Could help me to solve this

推荐答案

我遇到了同样的问题，我所做的就是修改 tag-it.js.当你调用函数 select 时，你需要通过函数 _addTag

I had the same problem and I what did was modify tag-it.js. When you call the function select you need to send the ID through the function _addTag

self._addTag(ui.item.label, ui.item.value, ui.item.id);

那么你只需要获取id:

Then youu just need to get the id:

_addTag: function(label, value, id) {
    ...
    this._addSelect(label, value, id);
    ...
}

这里将 ID 附加到隐藏的 Select 上

And here append the ID on a hidden Select

_addSelect: function(label, value, id) {
        var opt = $('<option>').attr({
            'selected':'selected',
            'value':id
        }).text(label);
        this.select.append(opt);

有了这个，你可以拥有一个用于自动完成列表的标签，一个显示在标签中的值，以及隐藏选择上的 ID.

With this you can have, one label for the autocomplete list, one value to show in the tag, and the ID on a hidden select.

这篇关于我们如何使用 Jquery tagit 获取所选标签的 ID?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！