Select2自动设置选项需求：项目选择后自动关联对应线索

Got it, let's get this auto-update behavior working for your Select2 components! The goal is to have the lead Select2 automatically set to the matching lead as soon as a project is selected—no extra clicks required. Here's a step-by-step solution:

Step 1: Set Up Your HTML Structure #

First, make sure your two Select2 dropdowns are properly defined:

<select id="project-select" class="select2" placeholder="Choose a project">
  <option value=""></option>
  <option value="1">Project Alpha</option>
  <option value="2">Project Beta</option>
  <option value="3">Project Gamma</option>
</select>

<select id="lead-select" class="select2" placeholder="Choose a lead">
  <option value=""></option>
  <option value="101">Lead for Alpha</option>
  <option value="102">Lead for Beta</option>
  <option value="103">Lead for Gamma</option>
</select>

Step 2: Initialize Select2 and Add the Auto-Update Logic #

You'll need to listen for when the project Select2 is changed, then map that selection to the corresponding lead and update the lead Select2 programmatically.

Option 1: Using a Predefined Mapping (Static Data) #

If you already know the project-to-lead relationship upfront, use a simple object to map them:

// Initialize both Select2 dropdowns
$('#project-select').select2();
$('#lead-select').select2();

// Define your project-to-lead mapping
const projectLeadMap = {
  '1': { id: '101', text: 'Lead for Alpha' },
  '2': { id: '102', text: 'Lead for Beta' },
  '3': { id: '103', text: 'Lead for Gamma' }
};

// Listen for the project selection change event
$('#project-select').on('select2:select', function(e) {
  const selectedProjectId = e.params.data.id;
  const matchingLead = projectLeadMap[selectedProjectId];

  if (matchingLead) {
    // Set the lead Select2 to the matching value and trigger UI update
    $('#lead-select').val(matchingLead.id).trigger('change');
  } else {
    // Clear the lead selection if no match exists
    $('#lead-select').val('').trigger('change');
  }
});

Option 2: Fetching Leads from a Backend API (Dynamic Data) #

If your leads are stored in a database and need to be fetched when a project is selected, use an AJAX call:

// Initialize Select2 components
$('#project-select').select2();
$('#lead-select').select2();

// Listen for project selection change
$('#project-select').on('select2:select', function(e) {
  const projectId = e.params.data.id;

  // Fetch the corresponding lead from your backend
  $.ajax({
    url: `/api/projects/${projectId}/corresponding-lead`, // Replace with your actual API endpoint
    method: 'GET',
    dataType: 'json',
    success: function(leadData) {
      // Assuming leadData has `id` and `text` properties (required by Select2)
      $('#lead-select').val(leadData.id).trigger('change');
    },
    error: function() {
      // Handle errors by clearing the lead selection
      $('#lead-select').val('').trigger('change');
      alert('Failed to load corresponding lead.');
    }
  });
});

Key Notes #

• Why trigger('change')? Select2 doesn't automatically update its UI when you set the value with val()—you need to trigger the change event to make it refresh and show the selected lead.
• Handling Clears: If a user deselects a project, you might want to clear the lead too. Add a listener for select2:unselect to handle that case:

  $('#project-select').on('select2:unselect', function() {
    $('#lead-select').val('').trigger('change');
  });
  

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