Как отключить заголовок в select2

Возможно, я немного опоздал, но ни одно из этих решений не сработало для меня, так как я динамически добавлял поля select2 в пользовательский интерфейс.

Этот код помог мне:

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

Если вы также динамически добавляете поля select2, не забывайте всегда выполнять этот код перед приведенным выше:

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

Этот код сначала удалит прослушиватель on hover во всех полях select2.

Эту проблему можно воспроизвести в 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 v4.0:

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

http://jsfiddle.net/by8k1dv9/

привет всем, если у вас есть эта проблема, этот простой трюк

<script>

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


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

});

Попробуйте отключить всплывающую подсказку для созданного 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 используйте приведенную ниже строку кода, чтобы удалить атрибут title из опций select2 из кода. удалите знак `, затем поместите в свой файл сценария

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

К сожалению, мне не повезло с приведенными выше решениями, возможно, потому, что в этом проекте используется начальная загрузка, а в Select2 использовались всплывающие подсказки начальной загрузки, которые выглядят по-разному и исчезают.

В этом случае при наведении курсора Select2 фактически удалит атрибут title, заменив его атрибутом aria-describedby, который содержит идентификатор вновь созданного элемента всплывающей подсказки. При выходе из мыши 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 от попыток показать какие-либо другие из них.

Я пытаюсь использовать это, и это работает:

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

Вы можете просто прокомментировать эти пару строк в вашем скрипте select2

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

Это не добавит атрибут title в первую очередь