So deaktivieren Sie die Titel in der select2

Habe ich ein select2 dropdown die wie folgt aussieht :

    $(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);
    });
});

Es bekommt es die Werte von meinem Modell in 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>
}

Alles funktioniert gut, AUßER wenn ich ein Element auswählen und es wird geladen, ich kann den Cursor über das dropdown Menü und es zeigt mir die ID von dem Element. Ich will nicht, um die ID zu zeigen!

So deaktivieren Sie die Titel in der select2

Auf dem Bild sehen Sie die Dropdownliste, und die item-Nummer, die erscheint, wenn ich den Mauszeiger über "Ice Tea"

Ich weiß, es ist, weil select2 bekommt die id von var id = e.params.data.title;, aber wie kann ich dies ändern?
Es funktioniert nicht mit var id = e.params.data.id;

Habe ich versucht zu verwenden, tooltip, aber ich bin neu hier.

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

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

Ich will einfach nur, um loszuwerden, die ID in der dropdown-beim hover über.
Jede Hilfe ist willkommen.

Ich glaube nicht, dass ich verstehe, wo die ID angezeigt wird und in welcher Art und Weise. Könnten Sie bitte ein Beispiel oder einen screenshot von der Ausgabe. Es klingt wie Sie haben ein script, das zeigt die ID...
Ich habe eine Antwort, aber ich bin nicht allzu zuversichtlich, dass es korrekt ist. Es könnte auch helfen, post ein jsfiddle, wenn niemand sonst kann es herausfinden.

InformationsquelleAutor marS | 2016-02-19

3

Können Sie Ereignisse entfernen, title-tag.

Zum Beispiel, dieser code funktioniert mit select2 v4.0:
```
$('select').on('change', function (evt) {
    $('.select2-selection__rendered').removeAttr('title');
});
```
http://jsfiddle.net/by8k1dv9/

InformationsquelleAutor Pavel K
3

Ich vielleicht ein bisschen spät, aber nicht von dieser Lösung arbeitete für mich, denn ich wurde dynamisch hinzufügen select2 Felder UI.

Dieser code hat den trick für mich:
```
$('.select2-selection__rendered').hover(function () {
    $(this).removeAttr('title');
});
```
Wenn Sie auch dynamisch hinzufügen select2 Felder nicht vergessen immer auf diesen code ausführen, bevor Sie über eine:
```
$('.select2-selection__rendered').unbind('mouseenter mouseleave');
```
Dieser code zuerst entfernen on hover listener auf alle select2 Felder.

InformationsquelleAutor Dean Koštomaj

Kann das problem reproduziert werden Select2 v4 indem Ihr mit der Maus über die select-box (in der single-Auswahl-Modus) oder über den markierten tags (in der mehrfach-Auswahl-Modus):

So deaktivieren Sie die Titel in der select2

Das plugin legt eine title - Attribut für diese Elemente standardmäßig, und es ist keine Konfiguration option verfügbar, um dieses Verhalten zu deaktivieren.

Hatte ich endete schreiben Sie eine kleine Erweiterung für die Select2 plugin.
Ich habe eine neue option Hinzugefügt, selectionTitleAttribute, die muss auf false gesetzt werden, um die zu entfernen title Attribut.

Fügen Sie den folgenden code direkt nach dem plugin-js-Datei:

;(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);

Nutzung

Initialisieren der select2 plugin mit der selectionTitleAttribute option false:

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

Demo

Fiddle: http://jsfiddle.net/hr8bqnpn/

Github repo: github.com/andreivictor/select2-selectionTitleAttribute
Können Sie möglicherweise senden diese als PR für Select2? Sieht aus wie es gibt eine Hilfe-wollte github.com/select2/select2/pull/3988

InformationsquelleAutor andreivictor

Deaktivieren Sie die QuickInfo für die erstellten 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');
});

Es funktioniert nicht, zeigt immer noch die ID
Könnten Sie bitte geben Sie ein JSFiddle mit dem Thema? Ich fühle mich wie ich bin Blick etwas, da ich nicht replizieren, das Verhalten.

InformationsquelleAutor CzechErface

0

Nach der Initialisierung select2, verwenden Sie die folgende code-Zeile zu entfernen, title-Attribut aus select2 Optionen von code. entfernen ` - Zeichen, dann setzen Sie in Ihrer Skript-Datei
```
   $("ul.select2-selection__rendered").hover(function(){
      $(this).find('li').removeAttr('title');
    });
```
InformationsquelleAutor Nick
-2

Können Sie einfach die Kommentar-diese paar Zeilen in Ihrer select2 Skript
```
//$rendered.attr('title', selection.title || selection.text);
//$selection.attr('title', selection.title || selection.text);
```
Diese nicht noch das title-Attribut an die erste Stelle
- Was ist, wenn ich select2 mit npm/bower oder was auch immer?
- finden Sie das Skript in den Ordner Module und Bearbeiten Sie ihn wie oben oder einfach fügen Sie einfach das Skript in eine html-Tags auf der Seite. Wenn Sie wollen, dass es kompiliert mit gulp/bower oder ähnliches, einfach fügen Sie das Skript in der src-Ordner und Bearbeiten Sie ihn wie oben.
- Es ist nicht eine gute Idee
- Nun, es ist eine funktionierende Lösung, die Sie nicht mögen.
- Dabei spielt es technisch funktioniert, die Menschen ermutigen, zu tun, Dinge, die Zähler zu den best practices ist in der Regel eine schlechte Sache.
- Ich bin damit einverstanden. Wo ist eine Lösung, die keine Begegnung best practices? Ich versuche nur zu helfen!
InformationsquelleAutor Kareem

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.