咨询如何在jQuery中实现动态级联下拉菜单及无子类输入框功能

Got it, let's build out that dynamic category dropdown form you need. The goal is to load subcategories when a parent is selected, and swap to a text input if there are no child categories. Here's a complete, working solution tailored to your existing ASP.NET setup:

1. Complete HTML Structure #

First, let's finish your existing markup and add placeholders for dynamic elements:

<div id="categoryContainer" data-target="@Url.Action("GetCategoryJsonList","Master", new { parentId = "0" })">
    <div class="form-group">
        @Html.BootHzLabelFor(x => x.Category, new { @class = "control-label" })
        <!-- Initial parent category dropdown -->
        @Html.DropDownListFor(x => x.CategoryId, ViewBag.ParentCategories as SelectList, "Select a category", new { @class = "form-control category-dropdown" })
    </div>
    <!-- Container for dynamic subcategory elements -->
    <div id="subCategoryContainer"></div>
</div>

Note: I added an initial dropdown for top-level categories, plus a dedicated container where subcategories or text inputs will be injected dynamically.

2. JavaScript Logic (jQuery) #

Add this script to handle the dynamic loading behavior. It listens for dropdown changes, fetches subcategories via AJAX, and updates the UI accordingly:

$(document).ready(function() {
    // Use event delegation to handle dynamically added dropdowns
    $(document).on('change', '.category-dropdown', function() {
        const selectedParentId = $(this).val();
        const targetUrl = $('#categoryContainer').data('target').replace('parentIdVal', selectedParentId);
        const subContainer = $('#subCategoryContainer');

        // Clear existing subcategory elements first to avoid clutter
        subContainer.empty();

        // Exit early if no category is selected
        if (!selectedParentId) return;

        // Fetch subcategories from the backend
        $.ajax({
            url: targetUrl,
            type: 'GET',
            dataType: 'json',
            success: function(categories) {
                if (categories.length > 0) {
                    // Build a new dropdown for subcategories
                    let dropdownHtml = `
                        <div class="form-group mt-3">
                            <label class="control-label">Subcategory</label>
                            <select class="form-control category-dropdown">
                                <option value="">Select a subcategory</option>
                    `;
                    categories.forEach(category => {
                        dropdownHtml += `<option value="${category.Id}">${category.Name}</option>`;
                    });
                    dropdownHtml += `
                            </select>
                        </div>
                    `;
                    subContainer.html(dropdownHtml);
                } else {
                    // No subcategories exist - show text input to create a new one
                    subContainer.html(`
                        <div class="form-group mt-3">
                            <label class="control-label">New Subcategory</label>
                            <input type="text" name="NewCategoryName" class="form-control" placeholder="Enter new category name">
                        </div>
                    `);
                }
            },
            error: function() {
                alert('Failed to load subcategories. Please try again.');
            }
        });
    });
});

Key details:

• Uses event delegation to handle clicks on dynamically added dropdowns (so nested subcategories work automatically)
• Replaces the parentIdVal placeholder in your data-target URL with the selected category ID
• Clears previous subcategory elements before loading new ones to prevent duplicate content
• Switches seamlessly between dropdown and text input based on whether subcategories exist

3. Backend Action (ASP.NET MVC) #

Make sure your GetCategoryJsonList action returns the correct JSON format. Here's an example implementation:

public ActionResult GetCategoryJsonList(int parentId)
{
    // Replace with your actual data access logic
    var subCategories = _categoryRepository.GetCategoriesByParentId(parentId)
        .Select(c => new { Id = c.Id, Name = c.Name })
        .ToList();

    return Json(subCategories, JsonRequestBehavior.AllowGet);
}

Ensure your repository method fetches categories where the parent ID matches the input parameter.

4. Quick Tips #

• Add validation for the text input (required, max length) using ASP.NET's built-in validation or client-side scripts
• If you need to support multiple levels of subcategories (grandchildren, great-grandchildren), the current JS logic handles this automatically thanks to event delegation
• Adjust the styling (like the mt-3 margin class) to match your form's existing design

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