javascript - 标记它提交ID而不是值或标签

Question

使用这个插件 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，有人知道怎么做吗？

Answer 1

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

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

然后您可以修改 tag-it.js 文件第 197 行以表示使用 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
                            }
                        }));
                    }
                });
            }
        });
   });