Jquery 如何在select2中禁用标题

我有一个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的工具提示

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

---

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

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

$('select').on('change', function (evt) {
    $('.select2-selection__rendered').removeAttr('title');
});

---

将鼠标放在选择框（单选模式）或所选标签（多选模式）上，即可在选择2 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

选项设置为

false

，初始化select2插件：

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

演示

---

Fiddle:

我可能有点晚了，但这些解决方案中没有一个对我有效，因为我正在向UI动态添加select2字段

这段代码帮了我的忙：

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

$(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字段，请不要忘记始终在执行上述代码之前执行以下代码：

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

---

此代码将首先删除所有select2字段上悬停时的

侦听器。

您只需在select2脚本中注释这两行即可

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

---

这不会首先添加title属性

初始化select2后，请使用代码行下方的命令从代码中的select2选项中删除title属性。删除`符号，然后放入脚本文件

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

---

不幸的是，我对上述解决方案没有任何运气，可能是因为这个项目使用了引导，而Select2使用的是引导工具提示，这些提示看起来不同，而且会逐渐消失

在这种情况下，鼠标悬停时，选择2实际上会删除

title

属性，并将其替换为

aria descripeby

，其中包含新创建的toolip元素的id。在mouseleave上，删除了

aria descripeby

，并再次恢复了

title

属性

因此，尝试删除

title

属性无效，因为它已经被删除，然后在mouseleave上再次恢复。这对我来说是个好办法：

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

$(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尝试显示更多悬停。

大家好，如果有这个问题，请使用这个简单的技巧

<script>

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


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

});

$（文档）。在（'mouseenter'，'上。选择2-selection\uu-rendered'，函数（）{
$（此）.removeAttr（“标题”）；
});

我试着使用它，它的效果是：

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

---

我想我不明白ID显示在哪里以及以什么方式显示。你可以发布一个例子或截图的问题。听起来你有另一个显示ID的脚本…我已经发布了一个答案，但我对它的正确性不太自信。如果没有其他人能够理解，那么发布一个JSFIDLE也可能会有所帮助。您能提供一个JSFIDLE来说明这个问题吗？我觉得我忽略了一些东西，因为我无法复制该行为。如果我安装带有npm/bower或其他功能的select2怎么办？在modules文件夹中找到脚本并按上述方式编辑它，或者只需在页面上的html标记中添加脚本。如果你想用gulp/bower或类似的工具来编译它，只需将脚本添加到你的src文件夹中，并按上面所述进行编辑。虽然它在技术上可行，但鼓励人们做与最佳实践背道而驰的事情通常是一件坏事。@AustinHemmelgarn我同意。哪里有没有遇到最佳实践的解决方案？我只是想帮忙！您是否可以将此作为Select2的PR提交？看起来需要帮助。请将此提交给git。我在多个选择部分添加了“this.$selection.find（'.select2-selection\uuuuu choice\uu remove'）。removeAttr（'title'）；”以删除“remove”按钮上的标题。您使用的是什么版本？或者只需对整个文档和所有

执行此操作。选择2-selection\uuu呈现的
$（文档）中随时可能出现的元素。在（'mouseenter'，'上。选择2-selection\uu呈现的'，函数（）{$（this）。removeAttr（'title'）；}）