iOS快捷指令中使用网页JS操作万事达货币转换器时的字段覆盖异常求助

看起来你在iOS快捷指令里用JS自动填充万事达货币转换器的时候遇到了一个挺闹心的小问题——设置完目标货币（EUR）之后，原本选好的源货币（ARS）居然被覆盖成EUR了，而且第三个字段还空了，删掉第三步就一切正常，这确实挺让人摸不着头脑的。

我仔细看了你的代码，发现问题大概率出在下拉菜单的选择器不够精准上。你现在用的是document.querySelectorAll('ul.dropdown-menu')来获取下拉选项，这会把页面上所有的下拉菜单都捞出来——包括你第一步打开的「源货币」下拉菜单（哪怕它已经被隐藏了，DOM元素还在页面里）。这就导致当你处理「目标货币」的下拉时，可能误操作了之前的源货币菜单，或者网页的下拉组件复用了菜单元素，最终引发了字段覆盖的问题。

给你两个针对性的优化方案，你可以试试：

方案一：精准定位当前下拉对应的菜单（优先推荐） #

修改第一步和第三步的代码，不要全局找所有下拉菜单，而是绑定到当前点击的下拉按钮对应的专属菜单上（很多网页的下拉组件比如Bootstrap，按钮和菜单是在同一个父容器里的）：

// 优化后的完整代码
// Step 1: Set the "From" Currency to ARS
var fromDropdownButton = document.getElementById('tCurrency');
fromDropdownButton.click(); // Open the dropdown menu for "From" currency
// 精准找到当前下拉按钮对应的菜单，避免全局遍历
var fromDropdownMenu = fromDropdownButton.closest('.dropdown').querySelector('.dropdown-menu');
var fromOptions = fromDropdownMenu.querySelectorAll('li a');
for (let option of fromOptions) {
    // 加上trim()避免文本里的空格干扰匹配
    if (option.textContent.trim().includes('ARS')) {
        option.click();
        break;
    }
}

// Step 2: Set the "Amount" to 10000
var amountField = document.getElementById('txtTAmt');
if (amountField) {
    amountField.value = "10000";
    amountField.dispatchEvent(new Event('input', { bubbles: true }));
}

// Step 3: Set the "To" Currency to EUR（核心优化部分）
var toDropdownButton = document.getElementById('cardCurrency');
toDropdownButton.click();
// 同样精准定位当前下拉的专属菜单
var toDropdownMenu = toDropdownButton.closest('.dropdown').querySelector('.dropdown-menu');
var toOptions = toDropdownMenu.querySelectorAll('li a');
for (let option of toOptions) {
    if (option.textContent.trim().includes('EUR')) {
        option.click();
        break;
    }
}

// Step 4: Set the "Bank Fee" to 0
var bankFeeField = document.getElementById('BankFee');
if (bankFeeField) {
    bankFeeField.value = "0";
    bankFeeField.dispatchEvent(new Event('input', { bubbles: true }));
}

// Completion message
completion("Form filled successfully: From=ARS, Amount=10000, To=EUR, Bank Fee=0");

方案二：给下拉菜单的选择加个小延迟（如果方案一无效的话） #

有些网页的下拉菜单是动态渲染的，点击按钮后需要一点时间才能把选项加载出来。这时候可以给第三步的菜单选择加个短暂的延迟，确保菜单已经完全渲染：

// 修改后的Step 3代码（仅展示修改部分）
// Step 3: Set the "To" Currency to EUR
var toDropdownButton = document.getElementById('cardCurrency');
toDropdownButton.click();
// 等待100ms让菜单渲染完成，时间可以根据实际情况调整
setTimeout(() => {
    var toDropdownMenu = toDropdownButton.closest('.dropdown').querySelector('.dropdown-menu');
    var toOptions = toDropdownMenu.querySelectorAll('li a');
    for (let option of toOptions) {
        if (option.textContent.trim().includes('EUR')) {
            option.click();
            break;
        }
    }
}, 100);

额外小提示： #

• 用textContent.trim()可以避免选项文本里的前后空格干扰匹配（比如有些选项可能显示「ARS - 阿根廷比索」，前面或后面有空格）
• 如果还是有问题，可以试试在选择完目标货币后，重新确认一下源货币的选择（不过这是兜底方案，优先用前两个方案）

你可以先试试方案一，应该能解决字段被覆盖的问题，毕竟核心就是把下拉菜单的选择范围缩小到当前操作的按钮对应的菜单，不会再误碰之前的源货币菜单了。

备注：内容来源于stack exchange，提问作者Borja Merino