web-dev-qa-db-fra.com

Comment obtenir le texte sélectionné depuis select2 en utilisant <input>

J'utilise le contrôle select2, chargement des données via ajax. Cela nécessite l'utilisation de la balise <input type=hidden..>.

Maintenant, je veux récupérer le texte sélectionné. (La propriété value de l'expression data-bind Répertorie le id uniquement)

J'ai essayé $(".select2-chosen").text(), mais cela se produit lorsque j'ai plusieurs contrôles select2 sur la page.

javascriptjqueryknockout-2.0jquery-select2ui-select2
62
robasta

À partir de Select2 4.x, il retourne toujours un tableau, même pour les listes de sélection multiple.

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

Pour Select2 3.x et inférieur

Sélection unique:

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

Notez que s'il n'y a pas de sélection, la variable 'data' sera nulle.

Sélection multiple:

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

À partir de la 3.x docs :

data Obtient ou définit la sélection. Analogue à la méthode val, mais fonctionne avec des objets plutôt que des identifiants.

la méthode data invoquée sur une sélection avec une valeur non définie renverra null, alors qu'une méthode data invoquée sur une sélection multiple vide renverra [].

149
Moeri

J'ai finalement compris comment faire ceci:

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

si vous voulez aussi la valeur:

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

Vous pouvez aussi avoir la valeur sélectionnée en utilisant le code suivant:

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

Le code ci-dessous résout aussi le contraire

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

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

 });
1
César Augusto

La bonne façon de procéder à partir de la v4 est la suivante:

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

Il est non documenté et pourrait donc se casser à l'avenir sans avertissement.

Vous voudrez probablement vérifier s’il ya une sélection en premier lieu cependant:

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

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

Encore une fois, je suggère simple et facile

Son fonctionnement parfait avec ajax lorsque l'utilisateur recherche et sélectionne enregistre les informations sélectionnées via 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
Vaimeo

Utilisé pour afficher le texte

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

Celui-ci fonctionne bien avec V 4.0.3

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