如何在JavaScript/JQuery中实现动态下拉菜单的异步选择事件处理？

问题说明 #

• 通过getData函数异步请求/api/company_list接口，动态生成下拉菜单#mySelect的选项
• 页面加载时默认展示列表首个公司名称，并请求/api/price_data接口获取其价格数据用于图表渲染
• 需求：切换下拉菜单选项时，更新页面显示的公司名称，并重新请求对应公司的价格数据更新图表，要求代码无重复
• 遇到的问题：直接给动态生成的下拉菜单绑定onChange事件无法触发后续异步操作

解决方案 #

关键优化点 #

1. 抽离重复逻辑：把加载价格数据、更新图表和公司名称的代码封装成独立函数，避免初始化和切换时重复写相同逻辑
2. 动态元素绑定事件：在下拉菜单选项生成完成后，直接为#mySelect绑定change事件监听器（此时元素已存在于DOM中，可正常绑定）

修改后的完整代码 #

function getData(url) {
    return fetch(url)
        .then(response => {
            if(!response.ok) {
                throw new Error('Bad Network Request');
            }
            return response.json();
        })
        .catch(error => {
            console.error('Fetch error:', error);
            throw error;
        });
}

// 抽离更新公司信息和图表的逻辑
function updateCompanyChart(symbol, companyName) {
    // 更新页面显示的公司名称
    $("#company").html(companyName);
    // 请求对应公司的价格数据并更新图表
    const priceUrl = `/api/price_data/?symbol=${symbol}`;
    getData(priceUrl)
        .then(priceData => {
            // 这里写图表更新的逻辑
            console.log("更新图表数据:", priceData);
        });
}

// 加载公司列表并初始化页面
getData('/api/company_list')
    .then(data => {
        let option = '';            
        for (let i = 0; i < data.length; i++) {
            // 给option添加data-name属性，方便后续直接获取公司全称
            option += `<option value="${data[i].symbol}" data-name="${data[i].company_name}">${data[i].stock_rank} - ${data[i].company_name}  (${data[i].symbol})</option>`;
        }
        
        const selectElement = $("#mySelect");
        selectElement.append(option);
        
        // 初始化首个公司的数据
        const firstCompany = data[0];
        updateCompanyChart(firstCompany.symbol, firstCompany.company_name);
        
        // 为下拉菜单绑定change事件
        selectElement.on('change', function() {
            const selectedOption = $(this).find(':selected');
            const selectedSymbol = selectedOption.val();
            const selectedName = selectedOption.data('name');
            
            updateCompanyChart(selectedSymbol, selectedName);
        });
    });

补充说明 #

• 生成下拉选项时添加data-name属性，能更可靠地获取公司全称，避免从选项文本中截取可能出现的格式问题
• updateCompanyChart函数统一处理公司数据更新逻辑，无论是页面初始化还是选项切换，只需调用该函数即可，完全消除代码重复

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