Let's talk about a select element I have:
<select id="mySelect">
<option>Volvo</option>
<option value="Cat" class="red">Cat</option>
<option value="Dog" class="red">Dog</option>
<option value="Mark" class="green">Mark</option>
<option value="BMW" class="blue">BMW</option>
<option value="Snake" class="red">Snake</option>
<option value="Ferrari" class="blue">Ferrari</option>
</select>
My question is, how can I maintain the same classes on select2 as well? While looking at the code, I noticed that there isn't a clear link between the original select and select2 in the DOM.
<ul class="select2-results__options" role="tree" id="select2-mySelect-results" aria-expanded="true" aria-hidden="false">
<li class="select2-results__option" id="select2-mySelect-result-gagv-Cat" role="treeitem" aria-selected="false">
Cat
</li>
<li class="select2-results__option" id="select2-mySelect-result-0987-Dog" role="treeitem" aria-selected="false">
Dog
</li>
<li class="select2-results__option" id="select2-mySelect-result-Fax9-Mark" role="treeitem" aria-selected="false">
Mark
</li>
...
</ul>
I attempted to use the "id" of the li elements, but was faced with a challenge - select2 creates a parameter that changes each time.
If you have any suggestions on how I can keep the same classes from the standard select into select2, please let me know! Thank you!