javascriptjqueryarraysjquery-chosen

jQuery Chosen : How to get array of selected options text from a multiple select


I'm using jQuery Chosen and I need to put every option text in an array from a multiple select's dropdown.

I can easily get all values in an array with this:

    <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();
   });

And depending on what option is selected, it will return an array of values like this:

    ['cty01', 'cty03', 'cty04']

What would be the equivalent of this to get the text instead of the value?

    ['New York', 'Montreal', 'Paris']

Thanks in advance for your help!


Solution

  • 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);
    
    });
    

    We're basically looping through each of the values, searching the <select> field for <option> tags matching the value and then pushing it to the labels array.