ASP.NET jQuery基于JSON实现级联下拉食物卡路里查询

核心故障点为ASP.NET WebForm服务器控件默认渲染ID与jQuery选择器写死的ID不匹配，按以下步骤修改即可实现全部需求：

• 第一步：修正前端控件ID配置
  ASP.NET WebForm带runat="server"标记的控件默认会自动拼接父容器前缀生成渲染ID，必须给所有需要JS操作的控件加ClientIDMode="Static"属性固定ID，从根源解决ID绑定不匹配问题，页面结构参考如下：

<!-- 食物分组一级下拉框 -->
<asp:DropDownList ID="ddlFoodGroup" runat="server" ClientIDMode="Static">
    <asp:ListItem Value="">请选择食物分组</asp:ListItem>
    <asp:ListItem Value="Dairy and Egg Products">Dairy and Egg Products（乳蛋制品）</asp:ListItem>
    <asp:ListItem Value="Fats and Oils">Fats and Oils（油脂）</asp:ListItem>
</asp:DropDownList>

<!-- 食物明细二级下拉框 -->
<asp:DropDownList ID="ddlFoodItem" runat="server" ClientIDMode="Static" Enabled="false">
    <asp:ListItem Value="">请先选择食物分组</asp:ListItem>
</asp:DropDownList>

<asp:Button ID="btnCalculate" runat="server" Text="Calculate" ClientIDMode="Static" OnClientClick="return false;" />
<div id="calorieResult"></div>

• 第二步：修正jQuery级联交互逻辑
  确保所有选择器使用和控件一致的固定ID，通过$.getJSON读取cons.json后按分组过滤数据，动态加载二级选项，按钮点击时直接读取选项绑定的卡路里值即可：

$(function() {
    // 一级分组切换事件
    $('#ddlFoodGroup').on('change', function() {
        const currentGroup = $(this).val();
        const $foodSelect = $('#ddlFoodItem');
        const $resultBox = $('#calorieResult');
        
        $foodSelect.empty().append('<option value="">加载中...</option>').prop('disabled', true);
        $resultBox.empty();

        if (!currentGroup) {
            $foodSelect.html('<option value="">请先选择食物分组</option>');
            return;
        }

        $.getJSON('cons.json', function(foodData) {
            $foodSelect.empty().append('<option value="">请选择具体食物</option>');
            // 过滤当前分组下的所有食物
            const matchedFoods = foodData.filter(item => item.group === currentGroup);
            // 追加选项时直接把卡路里存在value属性，减少后续查询逻辑
            matchedFoods.forEach(food => {
                $foodSelect.append(`<option value="${food.calorie}">${food.name}</option>`);
            });
            $foodSelect.prop('disabled', false);
        }).fail(() => {
            $foodSelect.html('<option value="">数据加载失败，请刷新重试</option>');
        });
    });

    // Calculate按钮查询事件
    $('#btnCalculate').on('click', function() {
        const calorieVal = $('#ddlFoodItem').val();
        const foodName = $('#ddlFoodItem option:selected').text();
        const $resultBox = $('#calorieResult');

        if (!calorieVal) {
            $resultBox.html('*请先选择具体食物后再查询*');
            return;
        }
        // 渲染查询结果
        $resultBox.html(`> 选中食物：${foodName}<br>卡路里含量：*${calorieVal} kcal*`);
    });
});

• 第三步：匹配cons.json数据结构
  确保JSON文件结构和JS读取逻辑一致，参考格式如下：

[
    {
        "group": "Dairy and Egg Products",
        "name": "Cheese, parmesan, low sodium（低钠帕玛森奶酪）",
        "calorie": 451
    },
    {
        "group": "Dairy and Egg Products",
        "name": "Cheese, cheddar（切达奶酪）",
        "calorie": 402
    },
    {
        "group": "Fats and Oils",
        "name": "Olive oil（橄榄油）",
        "calorie": 884
    }
]

验证说明 #

将cons.json放在页面可访问的站点路径下，部署后选择「Dairy and Egg Products（乳蛋制品）」分组，二级下拉框会自动加载该分类下所有食物；选中「Cheese, parmesan, low sodium（低钠帕玛森奶酪）」后点击Calculate按钮，即可正确展示卡路里值451。

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