JavaScript实现下拉框隐藏重置默认值及主下拉切换重置子下拉

Let’s tackle your two dropdown requirements step by step, building on your existing functionality:

Requirement 1: Reset Hidden Dropdowns to Default Value #

To reset a dropdown when it’s hidden, we’ll modify your existing display logic to trigger a reset whenever we toggle the element to hidden. Here’s how to update your displayTextField function:

function displayTextField(selector, show) {
  const element = document.getElementById(selector);
  if (!element) return;

  if (!show) {
    // Reset to default value — adjust this to match your actual default option
    element.value = element.options[0].value; // Use this for the first option, or replace with a specific value like ""
  }

  element.style.display = show ? 'block' : 'none';
}

Quick Explanation: #

• When we hide the dropdown (show is false), we immediately set its value back to the default state (either the first option in the list or a predefined value you specify).
• This ensures every time the dropdown is hidden, it’s ready to start fresh when shown again.

Requirement 2: Reset Child Dropdowns When Master Switches Values #

For this, we need to track which child dropdown was visible before the master changed, then reset it if it had a specific value selected. Let’s assume your master dropdown has an ID like masterSelector, and each child is tied to a specific master value (e.g., master value "size" shows TailleSelector):

// Track the last child dropdown that was displayed
let lastVisibleChild = null;

// Master dropdown change handler
document.getElementById('masterSelector').addEventListener('change', function() {
  const selectedMasterValue = this.value;

  // First, handle the previously visible child
  if (lastVisibleChild) {
    // Check if the child has the specific value that requires a reset (replace "special-value" with your target)
    if (lastVisibleChild.value === "special-value") {
      lastVisibleChild.value = lastVisibleChild.options[0].value; // Reset to default
    }
    // Hide the old child
    displayTextField(lastVisibleChild.id, false);
    lastVisibleChild = null;
  }

  // Show the new corresponding child (extend this switch for all your master-child pairs)
  switch(selectedMasterValue) {
    case "size":
      displayTextField("TailleSelector", true);
      lastVisibleChild = document.getElementById("TailleSelector");
      break;
    case "color":
      displayTextField("ColorSelector", true);
      lastVisibleChild = document.getElementById("ColorSelector");
      break;
    default:
      // Hide all children if no matching master value
      break;
  }
});

Quick Explanation: #

• lastVisibleChild keeps track of which child was active before the master dropdown changed.
• When the master switches, we first check if that child had the specific value you care about. If yes, we reset it to default.
• We then hide the old child, update our tracker, and show the new child (if applicable).

Key Notes for Customization: #

• Replace "special-value" with the exact child dropdown value that should trigger a reset when the master changes.
• Adjust the default value logic (element.options[0].value) if your dropdown uses an empty string or a specific default value instead of the first option.
• Extend the switch statement to cover all your master dropdown values and their corresponding child elements.

This implementation integrates smoothly with your existing functionality while addressing both of your requirements.

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