页面加载及变更时传多div值至Ajax，复用代码处理联动Select

Hey there! Let's break down how to solve both of your requirements with clean, reusable code that works seamlessly across your add and update pages.

1. Pass Multiple Div Values to Ajax on Load & Change Events (Requirement 1) #

First, we'll create a modular approach to collect div data and trigger Ajax calls whenever needed.

1.1 Helper Function to Collect Div Data #

Start with a function that grabs values from your target divs. We'll use a class selector and data attributes to organize the data:

function getDivData() {
  const divData = {};
  // Target all divs with class "data-div" (adjust this selector to match your HTML)
  $('.data-div').each(function() {
    // Use the div's `data-field` attribute as the key for your Ajax payload
    const fieldKey = $(this).data('field');
    // Grab the trimmed text content of the div as the value
    const fieldValue = $(this).text().trim();
    divData[fieldKey] = fieldValue;
  });
  return divData;
}

1.2 Trigger Ajax on Load & Change #

Next, create a reusable Ajax function and attach it to page load and change events:

function sendDivDataToAjax() {
  const payload = getDivData();
  
  $.ajax({
    url: '/your-api-endpoint', // Replace with your actual backend URL
    method: 'POST',
    data: payload,
    success: function(response) {
      console.log('Data submitted successfully:', response);
      // Add your success handling logic here (e.g., show a notification)
    },
    error: function(xhr, status, error) {
      console.error('Failed to send data:', error);
      // Add error handling logic here (e.g., show an error message)
    }
  });
}

// Run on page load
$(document).ready(function() {
  sendDivDataToAjax();
  
  // Trigger whenever relevant elements change (adjust selector to match your trigger elements)
  $('.trigger-update').on('change', function() {
    sendDivDataToAjax();
  });
});

HTML Example:

<!-- Divs holding your data -->
<div class="data-div" data-field="username">john_doe</div>
<div class="data-div" data-field="user_role">admin</div>

<!-- Element that triggers a change event -->
<select class="trigger-update">
  <option value="active">Active</option>
  <option value="inactive">Inactive</option>
</select>

2. Reusable Select Population with Cascading Support (Requirement 2) #

We'll build a single function to populate <select> elements, then adapt it for both add and update pages.

2.1 Reusable Select Population Function #

This function handles fetching options via Ajax, inserting them into a select, and optionally setting a pre-selected value:

function populateSelect(selectElement, ajaxUrl, selectedValue = null) {
  $.ajax({
    url: ajaxUrl,
    method: 'GET',
    success: function(optionsHtml) {
      // Clear existing options before inserting new ones
      $(selectElement).empty();
      // Insert the HTML options returned from your API
      $(selectElement).html(optionsHtml);
      
      // Set the pre-selected value if provided
      if (selectedValue !== null) {
        $(selectElement).val(selectedValue);
      }
    },
    error: function(xhr, status, error) {
      console.error('Failed to load options:', error);
    }
  });
}

2.2 Use on Database Add Page #

On the add page, we just need to populate the select on load and set up cascading updates:

$(document).ready(function() {
  // Populate main select on page load
  populateSelect('#category-select', '/api/get-categories');
  
  // Handle cascading select updates
  $('#category-select').on('change', function() {
    const selectedCategoryId = $(this).val();
    // Populate subcategory select based on selected category
    populateSelect('#subcategory-select', `/api/get-subcategories?category-id=${selectedCategoryId}`);
  });
});

2.3 Use on Database Update Page #

On the update page, we'll pass the pre-selected value (from your database) to the function and initialize cascading selects with the correct initial state:

$(document).ready(function() {
  // Get pre-selected value from a data attribute or hidden input
  const preSelectedCategory = $('#category-select').data('selected-id');
  
  // Populate main select with the pre-selected option
  populateSelect('#category-select', '/api/get-categories', preSelectedCategory);
  
  // Initialize cascading select with the correct subcategories
  populateSelect('#subcategory-select', `/api/get-subcategories?category-id=${preSelectedCategory}`, $('#subcategory-select').data('selected-id'));
  
  // Update cascading select when main select changes
  $('#category-select').on('change', function() {
    const selectedCategoryId = $(this).val();
    populateSelect('#subcategory-select', `/api/get-subcategories?category-id=${selectedCategoryId}`);
  });
});

HTML Example for Update Page:

<!-- Main select with pre-selected value stored in data attribute -->
<select id="category-select" data-selected-id="3"></select>

<!-- Cascading select with its own pre-selected value -->
<select id="subcategory-select" data-selected-id="7"></select>

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