标记它提交 id 而不是值或标签答案

【问题标题】：Tag it submit id not value or label标记它提交 id 而不是值或标签
【发布时间】：2013-03-27 03:46:00
【问题描述】：

使用这个插件 https://github.com/aehlke/tag-it 顺便说一句，它非常酷。

问题：

        <input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true">
        Tags:<br>
        <ul id="mytags"></ul>

<script type="text/javascript">
    $(document).ready(function () {
        $("#mytags").tagit({
            singleField: true,
            singleFieldNode: $('#mySingleField'),
            allowSpaces: true,
            minLength: 2,
            removeConfirmation: true,
            tagSource: function (request, response) {
                //console.log("1");
                $.ajax({
                    url: "../City/GetList",
                    data: { term: request.term },
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label + " (" + item.id + ")",
                                value: item.value
                            }
                        }));
                    }
                });
            }
        });
    });



</script>

当标签选择值时，它会将值添加到值 attr 中 CSV 格式的隐藏字段中。我想让它做 ID 而不是有人知道怎么做吗？

【问题讨论】：

请问你为什么要这样做
我想将 id 而不是值传回服务器
Line #238 of the plugin provided 是设置值的位置，如果有帮助的话。
问题也在github.com/aehlke/tag-it/issues/130

标签： javascript jquery tag-it

【解决方案1】：

这里有几件事。您可以通过将参数设置为下划线来设置分隔符而不是 CSV：

$("#mytags").tagit({
  ...
  singleFieldDelimiter: '_',
  ...

然后你可以在第197行修改tag-it.js文件，说使用ID属性。

变化：

var tags = node.val().split(this.options.singleFieldDelimiter);

成为

var tags = node.attr("id").split(this.options.singleFieldDelimiter);

假设您将隐藏字段修改为：

<input type="hidden" name="tags" class="mySingleField" id="Apple_Orange_Banana" value="Apple_Orange" disabled="true">

您可以修改 javascript 以获得所需的输出：

    $(document).ready(function () {
        $("#mytags").tagit({
            singleField: true,
            singleFieldNode: $('.mySingleField'),
            singleFieldDelimiter: '_',
            allowSpaces: true,
            minLength: 2,
            removeConfirmation: true,
            tagSource: function (request, response) {
                //console.log("1");
                $.ajax({
                    url: "../City/GetList",
                    data: { term: request.term },
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.label + " (" + item.id + ")",
                                value: item.value
                            }
                        }));
                    }
                });
            }
        });
   });

【讨论】：

如果我有带有 (id, label, value) 的项目，此更改是否从选择标签项目中选择 id 并将其设置为输入元素中的值字段，或者它是否从已选择的项目标签中选择值并添加它输入idattr？我想要第一个
这将标记 ID 的值，并为每个由下划线分隔的值创建一个标记。这是你想做的吗？
我正在寻找的是如果我的标签是 (id,lable,values) (1,apple , apple) 我想查看 .在显示的标签上，我想查看值 apple.. 目前它确实并显示 apple..

【解决方案2】：

更改 tag-it.js 文件

第 264 行的评论

// that.createTag(that._cleanedInput());

// The autocomplete doesn't close automatically when TAB is pressed.
// So let's ensure that it closes.
// that.tagInput.autocomplete('close');

285 号线附近

var autocompleteOptions = {
    select: function(event, ui) {
        that.createTag(ui.item);

创建一个新函数

assignedTagsData: function(){
    // Only to be used when singleField option is not seleted
    var tags = [];
    this.tagList.children('.tagit-choice').each(function() {
        tags.push($(this).data('tag_item_data') );
    });
    return tags;
}

that.createTag(ui.item);

创建标签

var tag = $('<li></li>')
    .data('tag_item_data',item) //add this line
    .addClass('tagit-choice ui-widget-content ui-state-default ui-corner-all')
    .addClass(additionalClass)
    .append(label);

【讨论】：