私はこのような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がvar id = e.params.data.title;
によってIDを取得するためだとわかっていますが、これを変更するにはどうすればよいですか? var id = e.params.data.id;
では機能しません
ツールチップを使おうとしましたが、これは初めてです。
//$("#select2-itemSelect-container").tooltip({
// title: "Search item",
// placement: "auto"
//});
カーソルを合わせたまま、ドロップダウンのIDを削除したいだけです。すべての助けに感謝します。
少し遅れるかもしれませんが、select2フィールドをUIに動的に追加していたため、このソリューションはどれもうまくいきませんでした。
このコードは私のためにトリックをしました:
$('.select2-selection__rendered').hover(function () {
$(this).removeAttr('title');
});
Select2フィールドも動的に追加する場合は、上記のコードの前に必ずこのコードを実行することを忘れないでください。
$('.select2-selection__rendered').unbind('mouseenter mouseleave');
このコードは、最初にすべてのselect2フィールドのon hover
リスナーを削除します。
イベントを使用して、タイトルタグを削除できます。
たとえば、このコードはselect2v4.0で機能します。
$('select').on('change', function (evt) {
$('.select2-selection__rendered').removeAttr('title');
});
この問題は、Select2 v4で、選択ボックス(単一選択モードの場合)または選択したタグ(複数選択モードの場合)の上にマウスを置くことで再現できます。 )::
プラグインはデフォルトでこれらの要素に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
});
Select2を初期化した後、以下のコード行を使用して、コードのselect2オプションからtitle属性を削除します。 `記号を削除してからスクリプトファイルに入れます
$("ul.select2-selection__rendered").hover(function(){
$(this).find('li').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');
});