级联Select下拉框onChange事件失效，无法生成后续下拉框求助

It looks like the main problem here is event delegation—your jQuery code only binds the change event to the initial select element, and doesn’t account for the new selects you add dynamically. Let’s break down how to fix this step by step:

1. The Core Problem with Your Original Code #

When you use $(t).change(function() { ... }) on page load, it only attaches the event handler to the select that exists at that moment (your first #ss1). Any new selects you add later won’t have this event bound to them, so selecting options in them won’t trigger the next dropdown to appear.

2. Corrected Code Example #

Let’s start with a solid base HTML structure, then adjust the jQuery to handle dynamic elements properly:

Example HTML #

<!-- A container to hold all your cascading selects -->
<div id="cascading-selects">
  <div id="ss1" parent="0">
    <select>
      <option value="">Select an option</option>
      <option value="1">Category 1</option>
      <option value="2">Category 2</option>
    </select>
  </div>
</div>

Fixed jQuery Code #

$(document).ready(function() {
  var selectCounter = 1;

  // Use event delegation on the parent container
  // This listens for change events on ANY select inside the container, even new ones
  $('#cascading-selects').on('change', 'select', function() {
    selectCounter++;
    const selectedValue = $(this).val();
    const currentDiv = $(this).closest('div');

    // Optional: Remove any existing sub-selects if the user reselects an earlier option
    currentDiv.nextAll().remove();

    // Only create a new select if a valid option was chosen
    if (selectedValue) {
      // Create the new div with ID and parent attribute
      const newDiv = $('<div>').attr({
        id: 'ss' + selectCounter,
        parent: selectedValue
      });

      // Create the new select element
      const newSelect = $('<select>');
      // Populate options based on the selected value (customize this to your data)
      if (selectedValue === '1') {
        newSelect.append('<option value="">Select sub-option</option>');
        newSelect.append('<option value="1a">Subcategory 1A</option>');
        newSelect.append('<option value="1b">Subcategory 1B</option>');
      } else if (selectedValue === '2') {
        newSelect.append('<option value="">Select sub-option</option>');
        newSelect.append('<option value="2a">Subcategory 2A</option>');
        newSelect.append('<option value="2b">Subcategory 2B</option>');
      }

      // Add the select to the new div, then add the div to the container
      newDiv.append(newSelect);
      $('#cascading-selects').append(newDiv);
    }
  });
});

3. Key Fixes Explained #

• Event Delegation: $('#cascading-selects').on('change', 'select', ...) ensures that every select (even dynamically added ones) triggers the change event, because we’re listening to the parent container instead of individual elements.
• Cleanup for Reselection: currentDiv.nextAll().remove() clears any existing sub-selects when the user changes their mind on an earlier dropdown, preventing messy duplicate cascades.
• Safe Element Creation: We explicitly create and append new elements to the existing container, avoiding issues with targeting non-existent elements (like the cut-off #picks in your snippet).

4. Quick Checks for Your Original Code #

• Make sure your target container (like #picks in your snippet) actually exists in your HTML.
• Double-check that you’re correctly setting the parent attribute on new divs to match the selected value.

Give this adjusted code a try, and your cascading selects should start working as expected!

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