I have a bootstrap multiple select-picker (not select) elements where my goal is to get the values out of them.

 <select id="custom_include" class="selectpicker" name='custom_include[]' data-header="Select target Groups" multiple data-actions-box="true" data-live-search="true" data-title="Target Groups"  data-show-tick="true" data-none-results-text="No groups matching" data-style="" data-style-base="form-control">
        {% for group in target_groups %}
           <option value="{{ group }}">{{ group }}</option>
        {% endfor %}
</select>

When I try searching by value:

$('#custom_include').val()

It returns only the first selected item in the dropdown.

When trying to search by selected text:

$('#custom_include').find("option:selected").text()

returns selected items stuck to each other as strings like the following example:

'dj dj.jewar@xol.comha ha.nyen@xol.com'

where the first entry is dj dj.jewar@xol.com and the second is ha ha.nyen@xol.com

When trying .text()

$('#custom_include').text()

it returns the entire content of the dropdown regardless what was selected.

For me it seems impossible but is there a way to return the selected values as arrays?

However, so far this seemed impossible to get all selected values.