如何通过双下拉菜单实现单按钮跳转多页面？按钮失效排查

需求与现状 #

需求：通过两个下拉菜单的选项组合，点击「Find Cards」按钮打开对应页面。
界面参考：

现有代码：

<table  style="font-style:nunito; background-color:#FFEBF6;border:none;">    
    <tr>
    <td style="font-style:nunito; background-color:#FFEBF6;border:none;">
        <label style="font-size:20px; padding-bottom:10px;">My credit score is</label>    
        <select id="selectBox1">        
            <option value="excellent">Excellent (720 - 850) </option>
            <option value="good">Good (690 - 719)</option>
            <option value="average">Average (630 - 689)</option>
            <option value="poor">Poor (350 - 629)</option>
        </select>
    </td>
    
    <td style="font-style:nunito; background-color:#FFEBF6;border:none;">
        <label style="font-size:20px; padding-bottom:10px;">I care most about</label>
        <select id="selectBox2">        
            <option value="a">Cash Back</option>
            <option value="b">Rewards</option>
            <option value="c">Travel</option>
            <option value="d">Balance Transfer</option>
            <option value="e">Low Interest</option>
            <option value="f">Building My Credit</option>
        </select>
    </td>
        
    <td style="font-style:nunito; background-color:#FFEBF6;border:none;"><br/>
        <input id="click" onclick="Redirect()" type="button" value="Find Cards" style="width:200px; height:45px; margin-top:5px;background-color: #2832C2;border:#415BA4;color:#ffffff; font-weight:bold;"/>
    </td>

    </tr>
</table>

问题：当前代码中的「Find Cards」按钮无法点击，需排查问题并实现对应跳转功能。

问题排查与修复 #

核心问题 #

按钮无响应的直接原因是未定义Redirect()函数——按钮的onclick事件绑定了该函数，但页面中没有任何相关实现，点击时会触发JavaScript报错，导致功能失效。

完整修复代码 #

以下是补充了函数实现的完整代码，你可以根据实际需求替换跳转URL：

<table  style="font-style:nunito; background-color:#FFEBF6;border:none;">    
    <tr>
    <td style="font-style:nunito; background-color:#FFEBF6;border:none;">
        <label style="font-size:20px; padding-bottom:10px;">My credit score is</label>    
        <select id="selectBox1">        
            <option value="excellent">Excellent (720 - 850) </option>
            <option value="good">Good (690 - 719)</option>
            <option value="average">Average (630 - 689)</option>
            <option value="poor">Poor (350 - 629)</option>
        </select>
    </td>
    
    <td style="font-style:nunito; background-color:#FFEBF6;border:none;">
        <label style="font-size:20px; padding-bottom:10px;">I care most about</label>
        <select id="selectBox2">        
            <option value="a">Cash Back</option>
            <option value="b">Rewards</option>
            <option value="c">Travel</option>
            <option value="d">Balance Transfer</option>
            <option value="e">Low Interest</option>
            <option value="f">Building My Credit</option>
        </select>
    </td>
        
    <td style="font-style:nunito; background-color:#FFEBF6;border:none;"><br/>
        <input id="click" onclick="Redirect()" type="button" value="Find Cards" style="width:200px; height:45px; margin-top:5px;background-color: #2832C2;border:#415BA4;color:#ffffff; font-weight:bold;"/>
    </td>

    </tr>
</table>

<script>
function Redirect() {
    // 获取两个下拉框的选中值
    const score = document.getElementById('selectBox1').value;
    const preference = document.getElementById('selectBox2').value;
    
    // 定义不同组合对应的跳转URL，请根据实际需求修改
    const urlMap = {
        'excellent-a': '/cash-back-excellent',
        'excellent-b': '/rewards-excellent',
        'good-c': '/travel-good',
        // 可继续添加更多组合...
    };
    
    // 生成组合键并匹配URL
    const key = `${score}-${preference}`;
    const targetUrl = urlMap[key] || '/default-card-page';
    
    // 跳转页面
    window.location.href = targetUrl;
}
</script>

代码说明 #

1. 获取选中值：通过document.getElementById获取两个下拉框的当前选中值
2. URL映射：用对象存储不同选项组合对应的跳转地址，便于维护和扩展
3. 跳转逻辑：根据组合键匹配对应URL，若无匹配则跳转到默认页面，确保不会出现无响应情况

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