如何根据下拉框选择动态获取JSON对象中变化的键值？

嘿，这个需求其实很好实现，核心思路就是放弃硬编码键名，改用下拉框选中的值动态匹配JSON对象的键，完全不用每次手动修改代码。下面一步步给你讲清楚怎么做：

核心步骤 #

1. 监听下拉框的选择变化事件，获取当前选中的加密货币和法币（重点处理「Other」自定义选项）
2. 把选中的值作为请求参数传给后端，确保后端返回对应键的价格数据
3. 在AJAX回调里，直接用选中的法币代码作为键，从返回的JSON中提取价格

具体代码实现 #

第一步：获取下拉框元素并绑定事件 #

首先拿到两个下拉框的DOM元素，然后给它们绑定change事件——不管是切换加密货币还是法币，都触发价格查询：

// 获取下拉框元素
const cryptoSelect = document.getElementById('crypto_list');
const currencySelect = document.getElementById('currency_list');

// 统一的价格查询处理函数
function fetchPrice() {
    // 获取选中的加密货币
    let selectedCrypto = cryptoSelect.value;
    // 获取选中的法币，处理「Other」选项
    let selectedCurrency = currencySelect.value;
    
    // 如果选中了Other，弹出输入框让用户输入自定义货币代码（比如GBP、AUD）
    if (selectedCurrency === 'Other') {
        selectedCurrency = prompt('请输入合法的法币代码（例如GBP）：');
        // 用户取消输入则终止流程
        if (!selectedCurrency) return;
    }

    // 发起AJAX GET请求，这里用fetch API举例，也可以用jQuery.ajax/XMLHttpRequest
    fetch(`/your-api-endpoint?crypto=${selectedCrypto}&currency=${selectedCurrency}`)
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(priceData => {
            // 核心：用选中的法币代码动态匹配JSON键
            const currentPrice = priceData[selectedCurrency];
            
            if (currentPrice !== undefined) {
                // 成功获取价格，这里可以把价格渲染到页面上
                console.log(`当前${selectedCrypto}的价格：${currentPrice} ${selectedCurrency}`);
                // 例如：document.getElementById('price-display').textContent = `${currentPrice} ${selectedCurrency}`;
            } else {
                // 处理后端返回不匹配的情况（比如用户输入无效代码）
                alert('无法获取该货币的价格，请检查输入的代码是否正确');
            }
        })
        .catch(error => {
            console.error('价格查询出错：', error);
            alert('价格查询失败，请稍后重试');
        });
}

// 给下拉框绑定事件
cryptoSelect.addEventListener('change', fetchPrice);
currencySelect.addEventListener('change', fetchPrice);

// 页面加载时默认触发一次，显示初始价格
window.addEventListener('load', fetchPrice);

关键细节说明 #

• 动态键匹配：priceData[selectedCurrency]这行是核心，它代替了原来硬编码的priceData.USD，不管用户选的是EUR、GBP还是自定义输入的代码，只要后端返回对应的键，就能自动拿到值。
• Other选项优化：示例用了prompt快速实现自定义输入，你也可以换成页面内的隐藏输入框（选中Other时显示），交互体验会更友好。
• 兼容性适配：如果项目还在用jQuery，核心逻辑完全通用，只需把fetch换成$.get：$.get(url, function(data) { const price = data[selectedCurrency]; })

额外建议 #

• 给后端传参前，可以对选中的值做简单验证（比如过滤特殊字符），避免恶意请求。
• 如果需要记住用户的自定义货币代码，可以用localStorage存储，下次打开页面时自动填充。

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