So erhalten Sie ausgewählten Text von select2, wenn Sie <Eingabe> verwenden


77

Ich verwende das select2-Steuerelement und lade Daten über Ajax. Dies erfordert die Verwendung des <input type=hidden..>Tags.

Jetzt möchte ich den ausgewählten Text abrufen. (Die valueEigenschaft im data-bindAusdruck ist die ideinzige)

Ich habe es versucht $(".select2-chosen").text(), aber dies bricht ab, wenn ich mehrere select2-Steuerelemente auf der Seite habe.

Antworten:


186

Ab Select2 4.x wird immer ein Array zurückgegeben, auch für Nicht-Multi-Auswahllisten.

var data = $('your-original-element').select2('data')
alert(data[0].text);
alert(data[0].id);

Für Select2 3.x und niedriger

Einzelauswahl:

var data = $('your-original-element').select2('data');
if(data) {
  alert(data.text);
}

Beachten Sie, dass die Variable 'data' null ist, wenn keine Auswahl vorhanden ist.

Mehrfachauswahl:

var data = $('your-original-element').select2('data')
alert(data[0].text);
alert(data[0].id);
alert(data[1].text);
alert(data[1].id);

Aus den 3.x- Dokumenten :

data Ruft die Auswahl ab oder legt diese fest. Analog zur val-Methode, funktioniert jedoch mit Objekten anstelle von IDs.

Eine Datenmethode, die bei einer Einzelauswahl mit einem nicht festgelegten Wert aufgerufen wird, gibt null zurück, während eine Datenmethode, die bei einer leeren Mehrfachauswahl aufgerufen wird, [] zurückgibt.


13
Beachten Sie, dass bei $('your-original-element')Einstellung auf Mehrfachauswahl $('your-original-element').select2('data')das Array zurückgegeben wird. In diesem Fall data.textfunktioniert die Verwendung nichtdata[index].text
Tangobee

7
Mit der aktuellen Version (v4.0.0 ab heute) von select2, auch für Single Select, hat das nur var data = $('your-original-element').select2('data')[0]bei mir funktioniert. $('your-original-element').select2('data').id // or .textgab mir undefined. Siehe diese jsfiddle als Beweis. Versuchen Sie, sich $('your-original-element').select2('data').id // or .textin der Geige in der Konsole anzumelden.
Fr0zenFyr

Wie sende ich per Formular senden .. normale Weise?
Hos Mercury

Diese Antwort ist nicht gut. funktioniert nicht mit 4.x + von select2. Sie müssen zum ersten Element im Array gehen, wie @ Fr0zenFyr sagte.
Nicolas Belley

Diese $('your-original-element').select2('data');Arbeit für mich. Danke
Ankit Suthar

15

Ich habe es endlich herausgefunden:

var $your-original-element = $('.your-original-element');
var data = $your-original-element.select2('data')[0]['text'];
alert(data);

wenn Sie auch den Wert wollen:

var value = $your-original-element.select2('data')[0]['id'];
alert(value);

5

Verwendet dies für Showtext

var data = $('#id-selected-input').select2('data'); 
data.forEach(function (item) { 
    alert(item.text); 
})

2

Sie können den ausgewählten Wert auch mit folgendem Code festlegen:

alert("Selected option value is: "+$('#SelectelementId').select2("val"));

2

Der folgende Code löst auch etwas anderes

.on("change", function(e) {

  var lastValue = e.currentTarget.value;
  var lastText = e.currentTarget.textContent;

 });

2

Der richtige Weg, dies ab Version 4 zu tun, ist:

$('.select2-chosen').select2('data')[0].text

Es ist nicht dokumentiert und könnte in Zukunft ohne Vorwarnung brechen.

Sie werden wahrscheinlich zuerst prüfen wollen, ob es eine Auswahl gibt:

var s = $('.select2-chosen');

if(s.select2('data') && !!s.select2('data')[0]){
    //do work
}

0

Wieder schlage ich einfach und leicht vor

Es funktioniert perfekt mit Ajax, wenn Benutzer suchen und auswählen. Es speichert die ausgewählten Informationen über Ajax

 $("#vendor-brands").select2({
   ajax: {
   url:site_url('general/get_brand_ajax_json'),
  dataType: 'json',
  delay: 250,
  data: function (params) {
  return {
    q: params.term, // search term
    page: params.page
  };
},
processResults: function (data, params) {
  // parse the results into the format expected by Select2
  // since we are using custom formatting functions we do not need to
  // alter the remote JSON data, except to indicate that infinite
  // scrolling can be used
  params.page = params.page || 1;

  return {
    results: data,
    pagination: {
      more: (params.page * 30) < data.total_count
    }
  };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom    formatter work
minimumInputLength: 1,
}).on("change", function(e) {


  var lastValue = $("#vendor-brands option:last-child").val();
  var lastText = $("#vendor-brands option:last-child").text();

  alert(lastValue+' '+lastText);
 });

0

Dieser funktioniert gut mit V 4.0.3

var vv = $('.mySelect2');     
var label = $(vv).children("option[value='"+$(vv).select2("val")+"']").first().html();
console.log(label); 

0

In Select2 Version 4 hat jede Option dieselben Eigenschaften wie die Objekte in der Liste.

wenn Sie das Objekt haben

Obj = {
  name: "Alberas",
  description: "developer",
  birthDate: "01/01/1990"
}

dann rufen Sie die ausgewählten Daten ab

var data = $('#id-selected-input').select2('data');
console.log(data[0].name);
console.log(data[0].description);
console.log(data[0].birthDate);
 
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.