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!
CodePudding user response:
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.
CodePudding user response:
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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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);
});
<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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>