Cloning select field with select2

How Do I...
#1

I want to use select2 for select field.
I need to clone that select field.
For first option it searching option is working fine as shown
https://forums.select2.org/uploads/default/original/1X/bcfbe07a1a3830d1ac6f3031ecc26f3d5ddf9a3f.jpg

But when second field is cloned, above selected option is fixed and I am unable to select the option and like below
https://forums.select2.org/uploads/default/original/1X/a220d5489811667db61fe724bf59c949c0fa87b5.PNG

#2

I’m not sure what you mean by “cloned”, but I’m assuming you mean you’ve made a copy of the input.select2-search__field. However, since that input is part of the Select2 widget and has event handlers attached to it, I don’t think simply copying the input will work. Also, the thing you click on to “activate” the Select2 is not an input element, it’s a span—again, part of the Select2 widget with event handlers attached. Simply copying the HTML span element will not make the Select2 appear wherever you want it to.

To do what you’ve described—and assuming you want to use the same Select2 instance for all of these fields—I think you should create a single instance of the Select2 widget in an absolutely positioned parent element (a div, for instance). Initially you should position the parent div offscreen. Your “genre” elements should be text inputs that are styled to match the Select2’s “closed” state (i.e., when the dropdown is not shown). Attach an onClick handler to your input element that repositions the Select2’s parent element over (on top of) your input, opens the Select2 and gives focus to its search field. (You can get your input's current screen position using JavaScript. Then the user can make their selection. When the selection is made and the dropdown closes, copy the selected value into the input element underneath and then move the Select2’s parent element back offscreen.

Details:

  • The Select2 API does not provide a way to programmatically open the dropdown. The only way I’ve found to do this is to set the value of the input.select2-search__field to a non-empty string, and then to clear that value after a small delay (maybe 50 or 100 msecs). The dropdown will then be open and the user will think their click is what opened it.
  • You’ll need an event handler to listen for the select2:select event so it can copy the selected value into the input beneath the Select2 and then move the Select2 offscreen. You’ll probably want to set the Select2’s closeOnSelect property to true as well.
  • You will probably need to experiment to figure out how to line up the Select2 to exactly match the position of your input elements. All your inputs can probably share the same onclick handler, which will find the position of the event’s currentTarget (which will be the input the user clicked on) and then move the Select2’s parent into position.
  • If you need to handle keyboard-only users,you’ll probably want to use an onfocus handler on your inputs instead of an onclick handler (since clicking an input also focuses it).

If all of that seems too complicated, then you could create a separate Select2 for each “Cast” row’s “genre” field. If your list of genres is fairly small and is static (i.e., you’re not retrieving the list of genres from a server or backend database), and you don’t expect too many rows to be created, then this approach might work, although it will consume more memory as the user creates more rows.