首页 文章

如何在select2中禁用 Headers

提问于
浏览
9

我有一个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 . 我不想出示身份证!

enter image description here

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

我知道这是因为select2通过 var id = e.params.data.title; 得到了id,但我怎么能改变这个呢?它不适用 var id = e.params.data.id;

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

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

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

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

5 回答

  • 0

    您可以在select2脚本中简单地注释这几行

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

    这不会在第一个位置添加title属性

  • 1

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

    通过将鼠标放在选择框(单选模式)或选定标签上(在多选模式下),可以在 Select2 v4 中重现该问题:

    enter image description here

    enter image description here

    默认情况下,插件会将 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/

  • -1

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

    这段代码对我有用:

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

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

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

    此代码将首先删除所有select2字段上的 on hover listener .

  • 3

    您可以使用事件删除 Headers 标记 .

    例如,此代码适用于select2 v4.0:

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

    http://jsfiddle.net/by8k1dv9/

相关问题