基于W3Schools示例扩展三级联动下拉菜单的技术请求

Sure thing! I’ve put together a fully functional 3-level dependent dropdown example that builds on the 2-level concept you referenced. This setup lets users pick a brand, then a model specific to that brand, and finally a sub-option (like a trim level) tied directly to the selected model. Here’s how it works:

<!DOCTYPE html>
<html>
<body>

<h2>3-Level Car Selector</h2>

<select id="brandSelect">
  <option value="">Select a brand</option>
</select>

<select id="modelSelect">
  <option value="">Select a model first</option>
</select>

<select id="trimSelect">
  <option value="">Select a trim first</option>
</select>

<script>
// Define our nested data structure: Brand → Model → Trims
const carData = {
  "Volvo": {
    "V70": ["T5", "D4", "R-Design"],
    "XC60": ["T8 Recharge", "B5 Mild Hybrid", "Inscription"]
  },
  "BMW": {
    "M6": ["Coupe", "Convertible", "Gran Coupe"],
    "X5": ["xDrive40i", "M50i", "xDrive45e"]
  },
  "Toyota": {
    "Camry": ["LE", "SE", "XLE"],
    "RAV4": ["Adventure", "Limited", "Hybrid"]
  }
};

// Get references to our dropdown elements
const brandSelect = document.getElementById('brandSelect');
const modelSelect = document.getElementById('modelSelect');
const trimSelect = document.getElementById('trimSelect');

// Populate the brand dropdown first
Object.keys(carData).forEach(brand => {
  const option = document.createElement('option');
  option.value = brand;
  option.textContent = brand;
  brandSelect.appendChild(option);
});

// Function to update model dropdown based on selected brand
function updateModels() {
  const selectedBrand = brandSelect.value;
  // Reset model and trim dropdowns
  modelSelect.innerHTML = '<option value="">Select a model</option>';
  trimSelect.innerHTML = '<option value="">Select a model first</option>';
  
  if (selectedBrand) {
    // Add models for the selected brand
    Object.keys(carData[selectedBrand]).forEach(model => {
      const option = document.createElement('option');
      option.value = model;
      option.textContent = model;
      modelSelect.appendChild(option);
    });
  }
}

// Function to update trim dropdown based on selected model
function updateTrims() {
  const selectedBrand = brandSelect.value;
  const selectedModel = modelSelect.value;
  // Reset trim dropdown
  trimSelect.innerHTML = '<option value="">Select a trim</option>';
  
  if (selectedBrand && selectedModel) {
    // Add trims for the selected brand + model
    carData[selectedBrand][selectedModel].forEach(trim => {
      const option = document.createElement('option');
      option.value = trim;
      option.textContent = trim;
      trimSelect.appendChild(option);
    });
  }
}

// Add event listeners for dropdown changes
brandSelect.addEventListener('change', updateModels);
modelSelect.addEventListener('change', updateTrims);
</script>

</body>
</html>

1. Data Structure #

We use a nested JavaScript object (carData) to map each brand to its models, and each model to its corresponding trim levels. This makes it super easy to look up the next set of options whenever a selection changes—no messy conditional checks needed.

2. HTML Setup #

We have three <select> elements with unique IDs:

• brandSelect: For choosing the car brand
• modelSelect: For choosing a model specific to the selected brand
• trimSelect: For choosing a trim level specific to the selected model

Each starts with a placeholder option to guide the user through the selection flow.

3. JavaScript Logic #

• Populate Brands: On page load, we loop through the top-level keys of carData and add each brand as an option to the first dropdown.
• Update Models: When the user selects a brand, this function clears the model and trim dropdowns, then adds all models associated with the selected brand to the model dropdown.
• Update Trims: When the user selects a model, this function clears the trim dropdown, then adds all trim levels tied to the selected brand + model combination.
• Event Listeners: We bind change events to the brand and model dropdowns to trigger the update functions whenever the user makes a selection.

Customization Tips #

• Want to add more brands/models/trims? Just extend the carData object with new nested entries—no need to change the core logic.
• You can replace trim levels with any other sub-option (like colors, engine types, etc.) by updating the array values in carData.

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