Estoy usando jQuery Chosen y necesito poner cada texto de opción en una matriz desde un menú desplegable de selección múltiple.
Puedo obtener fácilmente todos los valores en una matriz con esto:
<select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> var select_custom = jQuery("#select_custom"); select_custom.change(function(){ var values = select_custom.chosen().val(); });Y dependiendo de la opción seleccionada, devolverá una serie de valores como este:
['cty01', 'cty03', 'cty04']¿Cuál sería el equivalente de esto para obtener el texto en lugar del valor?
['New York', 'Montreal', 'Paris']¡Gracias de antemano por tu ayuda!
var select_custom = jQuery("#select_custom"); select_custom.change(function(){ var values = select_custom.chosen().val(); var labels = []; for (var i = 0; i < values.length; i++) { var label = select_custom.find('option[value="'+values[i]+'"]').text(); labels.push(label); } console.log(labels); }); Básicamente, estamos recorriendo cada uno de los valores, buscando en el campo <select> etiquetas <option> que coincidan con el valor y luego empujándolo a la matriz de labels .
Puedes usar la función de mapa
https://api.jquery.com/jquery.map/
$("#select_custom").change(function() { var text = $(this).find('option:selected').toArray().map(item => item.text).join(); console.clear(); console.log(text); $("#result").text(text); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select> <div id="result"></div> var select_custom = jQuery("#select_custom"); var arr = []; select_custom.change(function(){ var text = $('#select_custom option:selected').text(); if(!arr.includes(text)) { arr.push(text); } console.log(arr); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="select_custom" data-placeholder="Choose a city" style="width:50%;" class="chosen-processed" multiple> <option value="cty01">New York</option> <option value="cty02">Madrid</option> <option value="cty03">Montreal</option> <option value="cty04">Paris</option> <option value="cty05">Berlin</option> </select>