CODEWITHSUNDEEP
javascriptjqueryarraysjquery-chosen
Dali
Dali

Reputation: 287

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!

Upvotes: 1

Views: 1834

Answers (4)

lisandro
lisandro

Reputation: 496

One line to get an array of selected texts or values

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

Output: ["text1", "text2"]

var array_of_values = $('#SelectQButton option:selected').toArray().map(item => item.value);

Output: ["value1", "value2"]

Upvotes: 0

SKJ
SKJ

Reputation: 2326

You can use map function

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>

Upvotes: 0

Levi Cole
Levi Cole

Reputation: 3684

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.

Upvotes: 1

Adrian Biba
Adrian Biba

Reputation: 267

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>

Upvotes: 0

Related Questions