11

私は次のような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を見せたくない！

ここに画像の説明を入力

写真では、「アイスティー」にカーソルを合わせるとドロップダウンとアイテム番号が表示されます

select2 が で ID を取得しているためだとわかってvar id = e.params.data.title;いますが、これを変更するにはどうすればよいですか? 動作していません var id = e.params.data.id;

ツールチップを使用しようとしましたが、これは初めてです。

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

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

ホバー中にドロップダウンでIDを取り除きたいだけです。すべての助けに感謝します。

4

8 に答える 8

6

この問題は、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);

使用法

selectionTitleAttributeオプションを に設定して select2 プラグインを初期化しfalseます。

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

デモ

フィドル: http://jsfiddle.net/hr8bqnpn/

于 2017-09-20T16:24:16.083 に答える
0

作成した 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');
});
于 2016-02-19T08:51:51.543 に答える