javascript - ejemplo - Cómo obtener texto seleccionado de select2 cuando se usa<input>

select2 get value

Question

Estoy usando el control select2, cargando datos a través de ajax. Esto requiere el uso de la etiqueta <input type=hidden..> .

Ahora, quiero recuperar el texto seleccionado. (La propiedad de value en la expresión de vinculación de data-bind sotres el id solamente)

He intentado con $(".select2-chosen").text() , pero esto se rompe cuando tengo varios controles select2 en la página.

Answer 1

A partir de Select2 4.x, siempre devuelve una matriz, incluso para listas que no sean de selección múltiple.

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

Para Select2 3.xy menor

Selección única:

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

Tenga en cuenta que cuando no hay selección, la variable ''datos'' será nula.

Selección múltiple:

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

De los docs 3.x:

data Obtiene o establece la selección. De manera análoga al método val, pero funciona con objetos en lugar de identificadores.

El método de datos invocado en una sola selección con un valor no establecido devolverá nulo, mientras que un método de datos invocado en una selección múltiple vacía devolverá [].

Answer 2

El código a continuación también resuelve lo contrario

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

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

 });

Answer 3

Este funciona bien usando V 4.0.3

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

Answer 4

Finalmente lo descubrí haciendo esto:

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

si también quieres el valor:

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

Answer 5

La forma correcta de hacerlo desde v4 es:

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

No está documentado, por lo que podría romperse en el futuro sin previo aviso.

Sin embargo, es probable que desee verificar primero si hay una selección:

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

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

Answer 6

Nuevamente sugiero Simple y Fácil

Funciona perfectamente con ajax cuando el usuario busca y selecciona guarda la información seleccionada a través de 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);
 });

Answer 7

También puede tener el valor seleccionado usando el siguiente código:

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