Cómo obtener todo el texto de la opción seleccionada de selección múltiple usando Javascript

3 minutos de lectura

avatar de usuario de user123
usuario123

Tengo un problema para obtener todas las opciones seleccionadas en la selección múltiple

<select multiple="" title="" class="" id="fm_delivery_or_collection" name="fm_fields[fm_delivery_or_collection][]">
  <option value="90">Delivery or Collection1</option>
  <option value="91">Delivery or Collection2</option>
  <option value="92">Delivery or Collection3</option>
</select>

Abajo está mi código y me devuelve solo la primera opción seleccionada

var select = form.find('select')

for (var i = 0; i < select.length; i++) 
        {
            var s_id = jQuery(select[i]).attr('id');
            var str="",i;

            var e = document.getElementById(s_id);
            var strUser = e.options[e.selectedIndex].text;

            var name = jQuery(select[i]).attr('name')
            var str1 = jQuery(select[i]).attr('id').replace("fm_"," ")
            requestString += "<b>"+str1.replace(/_/g," ")+"</b>" + ':' +strUser+"<br>";
        }

Entonces, sugiérame cómo puedo obtener todo el texto de la opción seleccionada y dónde cometí un error.

  • El valor de select multiple (o select[select.selectedIndex]) es una matriz…

    – Teemu

    20 de febrero de 2013 a las 5:15


  • Las respuestas son demasiado complicadas. Puede obtener el texto de todas las opciones seleccionadas usando .map(). $("select :selected").map(function (i, element) { return jQuery(element).text(); }).get();

    – Kalimah

    30 de enero de 2018 a las 10:08


Avatar de usuario de Jai
Jai

Tu comentario please suggest me how can i get all selected option text, Así que puedes probar esto:

$("#fm_delivery_or_collection option:selected").each(function () {
   var $this = $(this);
   if ($this.length) {
    var selText = $this.text();
    console.log(selText);
   }
});

hacer todo en una línea ahora

var text = $('#selector option:selected').toArray().map(item => item.text).join();

vuelve así:

text1,text2,text3,text4

  • Buena y sencilla solución. Si necesita una salida diferente, join() acepta un separador como argumento. Por ejemplo, join(‘ | ‘), generará “texto1 | texto2 | texto3 | texto4”. Y una ligera mejora: jQuery recomienda usar $(‘#selector’).find(‘option:selected’), porque la búsqueda solo por ID se basa en document.getElementById, que es muy rápido, mientras que el selector completo no. Si #selector se refiere a una etiqueta de selección, también puede eliminar la “opción” innecesaria del selector para un poco más de eficiencia: learn.jquery.com/rendimiento/optimizar-selectores

    –Thibault Witzig

    5 de julio de 2019 a las 11:41


// Return an array of the selected opion values
// select is an HTML select element
function GetSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

pase esta función a su cuadro de selección como …

var selectBox = document.getElementsById('fm_delivery_or_collection');
alert(GetSelectValues(selectBox ));

devolverá la matriz de valores seleccionados

Usando Jquery

$('select#fm_delivery_or_collection').val()

la val función llamada desde el select devolverá una matriz si es un múltiplo.

Avatar de usuario de GautamD31
GautamD31

Prueba con esto

$("#fm_delivery_or_collection option").each(function(){
    if($(this).attr('selected') == 'selected')
    {
        var name = $("#fm_delivery_or_collection").attr('name')
        var str1 = $("#fm_delivery_or_collection").attr('id').replace("fm_"," ")
        requestString += "<b>"+str1.replace(/_/g," ")+"</b>" + ':' +strUser+"<br>";
     }
})

 $("#id :selected").each(function (i,sel) {
   alert($(sel).text());
 });

Espero eso ayude..

Avatar de usuario de Muthu
Muthu

prueba este enlace:

$("#selection option:selected").each(function () {
   var $this = $(this);
   if ($this.length) {
    var selText = $this.text();
    console.log(selText);
    $('#selected').append(selText+', ');
  }
});

avatar de usuario de adiga
adiga

Simplemente agregue esta línea de código: –

var reciever= jQuery('#to_select option:selected').toArray().map(item => item.text).join();
/* alert(reciever); */

¿Ha sido útil esta solución?