web-dev-qa-db-ja.com

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が表示されます。 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を削除したいだけです。すべての助けに感謝します。

jquerytooltipjquery-select2jquery-select2-4select2
10
marS

少し遅れるかもしれませんが、select2フィールドをUIに動的に追加していたため、このソリューションはどれもうまくいきませんでした。

このコードは私のためにトリックをしました：

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

Select2フィールドも動的に追加する場合は、上記のコードの前に必ずこのコードを実行することを忘れないでください。

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

このコードは、最初にすべてのselect2フィールドのon hoverリスナーを削除します。

3
Dean Koštomaj

イベントを使用して、タイトルタグを削除できます。

たとえば、このコードはselect2v4.0で機能します。

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

http://jsfiddle.net/by8k1dv9/

3
Pavel K

この問題は、Select2 v4で、選択ボックス（単一選択モードの場合）または選択したタグ（複数選択モードの場合）の上にマウスを置くことで再現できます。 ）：：

enter image description hereenter image description here

プラグインはデフォルトでこれらの要素にtitle属性を付加し、この動作を無効にするために使用できる構成オプションはありません。

Select2プラグインの小さな拡張機能を書くことになりました。新しいオプションselectionTitleAttributeを追加しました。これは、title属性を削除するためにfalseに設定する必要があります。

プラグインの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/

2
andreivictor

Select2を初期化した後、以下のコード行を使用して、コードのselect2オプションからtitle属性を削除します。 `記号を削除してからスクリプトファイルに入れます

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

作成した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');
});
0
CzechErface