Hi,
I have been using select2 for long time. when i need to hide options on-the-fly i use Wrap (from jquery) to wrap it with a div and then it is invisible for the user
but then if i hide one option, when i select another one it shows the hidden ones text in the rendered span
what can be done to hide options with select2?
Without more specific information about your situation (how you’re loading your options, how many there are, how you decide and keep track of what to hide, etc.), it’s hard to formulate an approach. However, in general, I’d think: If you weren’t using the Select2 widget but just a regular HMTL <select> element, you could probably hide options using CSS, or you could remove individual <option>s from the <select>. The CSS method probably won’t work with Select2, but have you tried removing the <option> you want to hide from the underlying <select> and then re-initializing it?
So, first i hide and not removing because when i select one option and click the add button i add this to a container and hide it until the uswe removes it
The hide is like this
$(“#select option:selected”).wrap(“<div></div>”);
In reguler select it works great
And no reinitiate worked
Thanks for the additional details. Your code doesn’t work because it is wrapping the <div> around the original <option> element, not the element that the Select2 widget displays.
According to the Select2 documentation, you can use the following code to find the selected element:
$('#select').find(':selected');
But that element is in the original <select>, not the Select2 widget. However, you can use that code to add a custom data- attribute to the selected <option> element when the “add” button is pressed; e.g., $('#select').find(':selected').attr('data-selected', 'true');.
Then, you can create a custom templateResult callback for the Select2 widget that returns null instead of the item’s text for any <option> with that data- attribute set. Returning null from the templateResult callback hides the item when the Select2 widget is open.
Finally, you can remove the custom data- attribute when the user removes the item from the container. How you would do that is up to you. If the <select> is a single-select, then it’s easy (just find the selected element); but if it’s a multi-select, then you’ll have to figure out how to target the correct <option>. That will depend on your data; for instance, whether each <option> has a unique ID value, or some other way to uniquely identify it. As long as you store that unique identifier in the “container”, you should be able to use it to find the <option> you need to unhide.
I hope this makes sense. Follow the links in my post for more details about each of those steps, and good luck!
Ok… thanks for this one! I did what you said and it works just fine!
You’re welcome! I’m glad it worked out for you. Would you mind giving me a Like for my suggestion? It helps my reputation score on the forum.