如何禁用select2中的标题

Posted 2023-05-07

【中文标题】如何禁用select2中的标题

【英文标题】：How to disable the title in select2

【发布时间】：2016-05-31 17:49:59

【问题描述】：

我有一个如下所示的 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。 感谢您的每一次帮助。

【问题讨论】：

我想我不明白 ID 的显示位置和显示方式。您能否发布该问题的示例或屏幕截图。听起来您有另一个显示 ID 的脚本...

我已经发布了一个答案，但我并不太相信它是正确的。如果没有其他人能弄明白，发布一个 jsfiddle 也可能会有所帮助。

【参考方案1】：

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

这段代码对我有用：

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

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

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

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

【讨论】：

或者简单地对整个文档和所有.select2-selection__rendered元素使用$(document).on('mouseenter', '.select2-selection__rendered', function () $(this).removeAttr('title'); );随时可能出现

@JánJanočko 也适用于您的代码。

【参考方案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);

用法

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

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

演示

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

【讨论】：

你能提交这个作为 Select2 的 PR 吗？貌似有求救github.com/select2/select2/pull/3988

请将此提交给 git。

我添加了“this.$selection.find('.select2-selection__choice__remove').removeAttr('title');”在multipleSelection部分，去掉按钮上的“Remove”标题。

你用的是什么版本？

【参考方案3】：

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

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

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

http://jsfiddle.net/by8k1dv9/

【参考方案4】：

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

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

【参考方案5】：

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

<script>

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


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

);

【参考方案6】：

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

【讨论】：

能否提供一个 JSFiddle 来解决这个问题？我觉得我忽略了一些东西，因为我无法复制这种行为。

【参考方案7】：

不幸的是，我对上述解决方案没有任何运气，可能是因为该项目使用引导程序，而 Select2 正在使用引导工具提示，它们看起来不同并且淡入。

在这种情况下，当鼠标悬停时，Select2 实际上会删除title 属性，将其替换为aria-describedby，其中包含一个新创建的toollip 元素的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 尝试显示更多。

【参考方案8】：

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

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