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

Question

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!

$("#select_custom option[value='cty01']").text() create loop for all value. — Rajdip Busa
– Rajdip Busa, Commented Oct 22, 2021 at 13:43

Levi Cole · Accepted Answer · 2021-10-23 09:20:37Z

1

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.

edited Oct 23, 2021 at 9:20

answered Oct 22, 2021 at 14:54

Levi Cole

3,7041 gold badge27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dali Over a year ago

I get this error on my first select: Uncaught Error: Syntax error, unrecognized expression: [option value="cty03"]

Dali Over a year ago

With this correction it's working: var label = select_custom.find('option[value="'+values[i]+'"]').text();

Levi Cole Over a year ago

@Dali sorry, didn’t notice the typo. Have updated my answer. Glad you figured out what was wrong!

score 0 · Accepted Answer · 2021-10-22 15:59:10Z

0

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>

edited Oct 22, 2021 at 15:59

answered Oct 22, 2021 at 15:09

user16173569

7 Comments

Dali Over a year ago

hello, I need an array of texts, not values

user16173569 Over a year ago

@Dali as you can see the code you have the text not the values, so to be clear you want to push all the text options when you change the select or you want to push te text of option which is selected ?

Dali Over a year ago

oh sorry, I can see that now. I will try this. (I want to push the text of options selected only)

user16173569 Over a year ago

@Dali okay then I'm changing my code just a minute

user16173569 Over a year ago

@Dali the code its done.

|

SKJ · Accepted Answer · 2021-10-23 22:09:31Z

0

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>

edited Oct 23, 2021 at 22:09

answered Oct 22, 2021 at 14:54

SKJ

2,4371 gold badge16 silver badges28 bronze badges

5 Comments

Dali Over a year ago

I don't think 'option:selected' will work with Chosen.

SKJ Over a year ago

Did you tried ? @Dali

Dali Over a year ago

Yes it gives me a string like this: MadridMontrealParisBerlin

Dali Over a year ago

You can try Chosen Multiple Select here: harvesthq.github.io/chosen you will see that there is no Selected if you inspect.

Dali Over a year ago

But I see now that there is a 'class="result-selected', maybe I can use that...

lisandro · Accepted Answer · 2024-11-07 16:07:51Z

0

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"]

answered Nov 7, 2024 at 16:07

lisandro

5215 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

7 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

7 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related