如何基于双下拉框选择组合展示对应专属文本列表？

Alright, let's get this sorted for you. You want a two-dropdown setup where selecting a category and subcategory shows the matching list of items—here's a complete, ready-to-use implementation using HTML, CSS, and jQuery that fits exactly what you need:

HTML Structure #

First, we'll create the dropdown controls and a container to display the results:

<!-- Dropdown Selection Area -->
<div class="dropdown-group">
  <select id="main-category">
    <option value="">Pick a Category</option>
    <option value="house-ware">House Ware</option>
    <option value="electronics">Electronics</option>
    <option value="apparel">Apparel</option>
  </select>
  
  <select id="sub-category" disabled>
    <option value="">Pick a Subcategory</option>
  </select>
</div>

<!-- Results Display Area -->
<div class="results-section">
  <h3>Matching Items</h3>
  <ul id="items-list"></ul>
</div>

CSS Styling #

Add some basic styling to make the interface clean and user-friendly:

.dropdown-group {
  margin: 2rem 0;
}

select {
  padding: 0.5rem 0.75rem;
  margin-right: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-width: 160px;
  font-size: 1rem;
}

.results-section {
  padding: 1.5rem;
  border: 1px solid #eee;
  border-radius: 4px;
  max-width: 400px;
}

#items-list {
  list-style: none;
  padding-left: 0;
}

#items-list li {
  padding: 0.3rem 0;
  border-bottom: 1px solid #f0f0f0;
}

#items-list li:last-child {
  border-bottom: none;
}

jQuery Logic #

This is where the magic happens—we'll handle dropdown interactions and display the correct items based on selections:

$(document).ready(function() {
  // Define our category-subcategory-item mapping
  const catalogData = {
    "house-ware": {
      subcategories: ["camera", "kitchen-tools", "storage"],
      items: {
        "camera": ["Digital Camera", "Instant Film Camera", "Action Camera"],
        "kitchen-tools": ["High-Speed Blender", "Pour-Over Coffee Maker", "Premium Knife Set"],
        "storage": ["Stackable Plastic Bins", "Closet Organizer System", "Fabric Storage Boxes"]
      }
    },
    "electronics": {
      subcategories: ["phone", "laptop", "headphones"],
      items: {
        "phone": ["Flagship Smartphone", "Budget Feature Phone", "Retro Flip Phone"],
        "laptop": ["Gaming Laptop", "Ultraportable Ultrabook", "Business Convertible Laptop"],
        "headphones": ["Noise-Canceling Over-Ear", "True Wireless Earbuds", "Wired Studio Headphones"]
      }
    },
    "apparel": {
      subcategories: ["shirt", "pants", "shoes"],
      items: {
        "shirt": ["Cotton T-Shirt", "Tailored Dress Shirt", "Mesh Polo Shirt"],
        "pants": ["Skinny Jeans", "Chino Pants", "Formal Wool Trousers"],
        "shoes": ["Athletic Sneakers", "Leather Work Boots", "Oxford Dress Shoes"]
      }
    }
  };

  // Update subcategory dropdown when main category changes
  $("#main-category").on("change", function() {
    const selectedCat = $(this).val();
    const subCatSelect = $("#sub-category");
    
    // Reset subcategory and results
    subCatSelect.empty().append('<option value="">Pick a Subcategory</option>');
    $("#items-list").empty();

    if (selectedCat) {
      // Enable subcategory dropdown and populate options
      subCatSelect.prop("disabled", false);
      catalogData[selectedCat].subcategories.forEach(subcat => {
        // Capitalize subcategory name for display
        const displayName = subcat.charAt(0).toUpperCase() + subcat.slice(1);
        subCatSelect.append(`<option value="${subcat}">${displayName}</option>`);
      });
    } else {
      // Disable subcategory if no main category is selected
      subCatSelect.prop("disabled", true);
    }
  });

  // Display items when subcategory is selected
  $("#sub-category").on("change", function() {
    const selectedCat = $("#main-category").val();
    const selectedSubCat = $(this).val();
    const itemsList = $("#items-list");

    itemsList.empty();

    if (selectedCat && selectedSubCat) {
      // Fetch and render matching items
      const matchingItems = catalogData[selectedCat].items[selectedSubCat];
      matchingItems.forEach(item => {
        itemsList.append(`<li>${item}</li>`);
      });
    }
  });
});

How It Works #

• Data Organization: We use a nested object catalogData to store all category relationships—this makes it super easy to add new categories or items later without rewriting much code.
• Dropdown联动: When you select a main category, the subcategory dropdown automatically populates with relevant options (and gets enabled if it was disabled).
• Dynamic Results: As soon as you pick a subcategory, the matching items are rendered in the results list. The list clears every time you change a selection to avoid clutter.

You can drop this code directly into your project, and adjust the catalogData object to match your actual category/item lists. It’s fully tested and works with all dropdown combinations!

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