如何在select2中禁用标题

Question

我有一个select2下拉列表,如下所示:

    $(function () {
  $("#itemSelect").select2().on("select2:select", function (e) {
   $("#itemSelect").val(-1).trigger("change");
        var id = e.params.data.title;
        var url = siteRoot + "/site/item?itemID=" + id ;
        $("#Container").load(url);
    });
});

它从我的模型中获取它的值:

<select class="js-data-example-ajax" aria-expanded="true" style="width: 100%; display: none;" id="itemSelect">
<option disabled selected value="-1"> Search by item </option>
@foreach (var item in Model)
{
    <option text="@item.Id" title="@item.Id">
        item.Name
    </option>
}

一切正常,除了当我选择一个项目并且已经加载时,我可以将鼠标悬停在下拉列表上,它会显示项目中的ID.我不想出示身份证!

在图片中,您可以看到当我将鼠标悬停在"冰茶"上时显示的下拉列表和项目编号

我知道这是因为select2得到了id var id = e.params.data.title;,但我怎么能改变这个呢？它不合作 var id = e.params.data.id;

我尝试使用工具提示,但我是新手.

//$("#select2-itemSelect-container").tooltip({
//    title: "Search item",

//    placement: "auto"
//});

我只是想在鼠标悬停时删除下拉列表中的ID.感谢每一位帮助.

Answer 1

我可能有点晚了，但是由于我正在向 UI 动态添加 select2 字段，因此这些解决方案都不适合我。

这段代码对我有用：

$('.select2-selection__rendered').hover(function () {
    $(this).removeAttr('title');
});

如果您还动态添加 select2 字段，请不要忘记始终在上述代码之前执行此代码：

$('.select2-selection__rendered').unbind('mouseenter mouseleave');

此代码将首先删除on hover所有 select2 字段上的侦听器。

Answer 2

在Select2 v4 中，可以通过将鼠标放在选择框上（单选模式）或所选标签上（多选模式）来重现该问题：

该插件title默认为这些元素附加一个属性，并且没有可用的配置选项来禁用此行为。

我最终为Select2插件编写了一个小扩展。我添加了一个新选项 ，selectionTitleAttribute必须将其设置为 false 才能删除该title属性。

在插件js文件后添加以下代码：

;(function($) {

  // Extend defaults
  //
  var Defaults = $.fn.select2.amd.require('select2/defaults');

  $.extend(Defaults.defaults, {
    selectionTitleAttribute: true
  });

  // SingleSelection
  //
  var SingleSelection = $.fn.select2.amd.require('select2/selection/single');

  var _updateSingleSelection = SingleSelection.prototype.update;

  SingleSelection.prototype.update = function(data) {

    // invoke parent method
    _updateSingleSelection.apply(this, Array.prototype.slice.apply(arguments));

    var selectionTitleAttribute = this.options.get('selectionTitleAttribute');

    if (selectionTitleAttribute === false) {
      var $rendered = this.$selection.find('.select2-selection__rendered');
      $rendered.removeAttr('title');
    }

  };


  // MultipleSelection
  //
  var MultipleSelection = $.fn.select2.amd.require('select2/selection/multiple');

  var _updateMultipleSelection = MultipleSelection.prototype.update;

  MultipleSelection.prototype.update = function(data) {

    // invoke parent method
    _updateMultipleSelection.apply(this, Array.prototype.slice.apply(arguments));

    var selectionTitleAttribute = this.options.get('selectionTitleAttribute');

    if (selectionTitleAttribute === false) {
      var $rendered = this.$selection.find('.select2-selection__rendered');
      $rendered.find('.select2-selection__choice').removeAttr('title');
      this.$selection.find('.select2-selection__choice__remove').removeAttr('title');
    }

  };

})(window.jQuery);

用法

使用selectionTitleAttribute设置为的选项初始化 select2 插件false：

$("select").select2({
  // other options 
  selectionTitleAttribute: false
});

演示

小提琴：http : //jsfiddle.net/hr8bqnpn/

Answer 3

尝试禁用创建的 select2 的工具提示。

$(function () {
    $("#itemSelect").select2().on("select2:select", function (e) {
        $("#itemSelect").val(-1).trigger("change");
        var id = e.params.data.title;
        var url = siteRoot + "/site/item?itemID=" + id ;
        $("#Container").load(url);
    }).tooltip('disable');
});