Jquery 类别和子类别嵌套下拉菜单答案

【问题标题】：Jquery Category abd subcategory Nested Drop DownsJquery 类别和子类别嵌套下拉菜单
【发布时间】：2012-04-19 16:44:36
【问题描述】：

我在 Asp.Net MVC3 中有 2 个下拉菜单。

控制器提供类别列表，我使用 Jquery Ajax 调用控制器类别方法并在下拉列表中填充类别列表。
控制器提供子类别列表，我使用 Jquery Ajax 调用控制器子类别方法并在下拉列表中填充子类别列表。

如何使用 jquery 根据所选类别填充 su7bcategories ？任何帮助，将不胜感激。

如果有任何其他替代选项可以执行此任务，请向我提出建议。

【问题讨论】：

标签： jquery

【解决方案1】：

使用类别附加 onchange 事件并将所选类别索引发送到服务器。服务器方法应填写其他下拉列表中的子类别

【讨论】：

能否请您推荐一些在线示例。我正在使用纯 html 代码进行控件。我尝试在线搜索，但找不到一个带有纯 html 控件的。每个人都使用我不想使用的 html 助手和 asp.net 服务器控件。
这里提供了很多方法，请过一遍。 forums.asp.net/t/1468612.aspx/1

【解决方案2】：

<table>
    <tr>
        <td>Category
        </td>
        <td>
            <select id="Category"></select>
        </td>
    </tr>
    <tr>
        <td>Subcategory
        </td>
        <td>
            <select id="SubCategory"></select>
        </td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '/ControllerName/GetAllCategory', type: 'Get', dataType: 'json',
            success: function (data) {
                var categoryObj = $('#Category');
                categoryObj.empty();
                $.each(data, function (i, entity) {
                    categoryObj.append('<option value="' + entity.Id + '">' + entity.Name + '</option>');
                });
            }
        });

        $('#Category').change(function () {
            $('#SubCategory').empty();
            if ($(this).val() != null && $(this).val() != 0) {
                $.ajax({
                    url: '/ControllerName/GetAllSubCategory', type: 'Get', dataType: 'json',
                    data: { CategoryId: $(this).val() },
                    success: function (data) {
                        var subCategoryObj = $('#SubCategory');
                        //subCategoryObj.empty();
                        $.each(data, function (i, entity) {
                            subCategoryObj.append('<option value="' + entity.Id + '">' + entity.Name + '</option>');
                        });
                    }
                });
            }
        });
    });
</script>

【讨论】：