I'm having trouble figuring out how to make the Select2 plugin work for my specific color selection feature.
My goal is to allow users to choose 5 colors from a list, including an "Other" option. When the user selects "Other", they should be able to pick a custom color using a color picker. To achieve this, I created 5 options all named "Other" so that users can select it multiple times if needed. However, I am facing issues with hiding the "Other" options that are not the first one displayed when users search for a color.
I've tried using the following code snippet to show/hide the "Other" options:
$('.multi-select').select2('misc options').on("select2:open", function () {
$('.select2-results__option[aria-selected="false"]:contains("Other"):not(:eq(0))').hide();
$('.select2-results__option[aria-selected="false"]:contains("Other"):eq(0)').show();
});
However, binding the same function to the search input element causes erratic flashing of elements and the top "Other" option floating above the select object. This flashing occurs due to conflicting event bindings within the plugin.
I have attempted various solutions such as modifying CSS selectors and applying classes to the <li></li> elements created by Select2, but none have been successful.