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);
    });
});

它从我的模型中获取它的值：html：

<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通过var id = e.params.data.title;获取了ID，但我该如何更改？它不适用于var id = e.params.data.id;

我尝试使用工具提示，但我是新手。

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

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

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

Answer 1

您可以使用事件删除标题标记。

例如，此代码适用于select2 v4.0：

UserId

http://jsfiddle.net/by8k1dv9/

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');
    }

  };

})(window.jQuery);

用法

将selectionTitleAttribute选项设置为false初始化select2插件：

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

演示

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

Answer 3

我可能有点晚了，但是由于我动态地将select2字段添加到UI，所以这个解决方案不适用于我。

这段代码对我有用：

$("#spark-collector").kendoSparkline({
    type: "line",
    data: [
        71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
        73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
        63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
        63, 64, 63, 67, 58, 56, 53, 59, 51, 54
    ],
    valueAxis: {
        min: 0,
        max: 100
    },
    seriesColors: ["blue"],
    tooltip: {
        visible: true
    }
});

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

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

此代码将首先删除所有select2字段上的$('.select2-selection__rendered').unbind('mouseenter mouseleave');侦听器。

Answer 4

尝试禁用已创建的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');
});

Answer 5

初始化select2之后，使用下面的代码行从代码中的select2选项中删除标题属性。删除`符号，然后将其放入脚本文件中

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

Answer 6

不幸的是，我对上述解决方案没有任何运气，可能是因为该项目使用了Bootstrap，而Select2却在使用Bootstrap工具提示，这些提示看起来有所不同并且逐渐淡入。

在这种情况下，在鼠标悬停时，Select2实际上将删除title属性，将其替换为aria-describedby，该属性包含一个新创建的toolip元素的ID。在mouseleave上，aria-describedby被删除，title属性又被恢复。

因此尝试删除title属性无效，因为它已被删除，然后在mouseleave上再次恢复。所以这对我有用：

$(document).on('mouseenter', '.select2-selection__rendered', function () {
  var tooltipId = $(this).attr("aria-describedby"); // contains the id of the tooltip
  $("#" + tooltipId).hide(); // hide the tooltip before it fades in
  $(this).unbind('mouseenter mouseleave'); // stop it showing another tooltip
});

上面的代码并不能阻止Select2在鼠标悬停在第一次时尝试显示工具提示，但是.hide()成功地阻止了它在淡入之前显示。。然后，解除绑定的悬停将阻止Select2尝试显示更多内容。

Answer 7

大家好，如果您有这个简单的窍门

<script>

$(document).on('mouseenter', '.select2-selection__rendered',  function () {


    $(this).removeAttr("title");

});

Answer 8

我尝试使用它，它的工作原理：

        $(document).on('mouseenter', '.select2-selection__rendered', function () {
            $('.select2-selection__rendered').removeAttr('title');
        });

Answer 9

您可以在select2脚本

中简单地注释这几行

//$rendered.attr('title', selection.title || selection.text);
//$selection.attr('title', selection.title || selection.text);

这不会在第一个地方添加title属性

如何在select2中禁用标题

9 个答案:

用法

演示