如何解决页面中多次使用select2-multiple组件的失效问题？

Got it, I’ve run into this exact issue before—when you can’t change duplicate IDs but need multiple Select2 instances to work. Let’s walk through two solid solutions that’ll get all your select boxes up and running without manual HTML edits:

Solution 1: Initialize Select2 on all duplicate ID elements using querySelectorAll #

Even though duplicate IDs are technically invalid HTML, browsers let you work around this by using querySelectorAll to grab every element with that ID. You can then loop through each one and initialize Select2 individually.

Here’s how to do it with jQuery (since Select2 is commonly paired with jQuery):

// Wait for the DOM to be fully loaded first
$(document).ready(function() {
  // Grab all elements with the duplicate ID
  const multiSelects = document.querySelectorAll('#select2-multiple');
  
  // Loop through each element and initialize Select2
  $(multiSelects).each(function() {
    $(this).select2({
      // Add your preferred Select2 options here (adjust as needed)
      placeholder: "Choose options",
      allowClear: true
    });
  });
});

Why this works: #

• document.getElementById only returns the first element with a given ID, but querySelectorAll returns every match—even if the IDs are duplicated.
• By initializing Select2 on each element separately, you avoid the conflict that comes from targeting just the first instance.

Solution 2: Dynamically assign unique IDs before initializing #

If you want to fix the invalid HTML structure (a good practice to avoid future issues), use JavaScript to generate unique IDs for each element right after the page loads, then initialize Select2 on each new ID.

$(document).ready(function() {
  // Get all elements with the duplicate ID
  const multiSelects = document.querySelectorAll('#select2-multiple');
  
  // Assign unique IDs and initialize Select2
  multiSelects.forEach((select, index) => {
    // Update the ID to be unique (e.g., select2-multiple-0, select2-multiple-1)
    select.id = `select2-multiple-${index}`;
    
    // Initialize Select2 on the updated element
    $(select).select2({
      placeholder: "Choose options",
      allowClear: true
    });
  });
});

Why this works: #

• This converts your invalid duplicate IDs into valid unique ones, eliminating any potential conflicts with other scripts or browser behavior.
• Each Select2 instance is tied to its own unique ID, so all components will function independently.

Quick Tips: #

• If your existing code already initializes Select2 on #select2-multiple, make sure to remove or override that code to prevent it from interfering with your new initialization logic.
• For vanilla JS users (no jQuery), you can adapt the code using the native Select2 initialization method: new Select2(selectElement, options).

内容的提问来源于stack exchange，提问作者geekyfreaky