表单提交时根据下拉选择与搜索词跳转对应URL的实现方法

不用修改你现有的HTML核心结构，加一段原生JavaScript监听表单提交事件就能实现需求，核心逻辑很直接：

• 拦截表单默认的提交跳转行为
• 读取文本输入框的内容，做URL编码处理避免特殊字符导致地址格式异常
• 判断下拉选择框当前选中的选项
• 按照规则拼接对应目标地址，执行页面跳转

完整可直接复用的代码如下，仅需要给表单补充一个id用于绑定事件，其余原有表单项代码完全不需要改动：

<form id="searchForm">
    <input type="text" id="text_1" name="text_1" value="test" data-alias="" class="form-control">
    <select id="selectlist_1" name="selectlist_1" data-alias="" class="form-control">
        <option value="option_1" >Option_1</option>
        <option value="option_2" >Option_2</option>
    </select>
    <button type="submit" id="button_1" name="button_1" class="btn btn-primary" >Submit</button>
</form>

<script>
const searchForm = document.getElementById('searchForm');
searchForm.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 获取输入关键词，做URL编码兼容特殊字符、中文等输入
    const keyword = encodeURIComponent(document.getElementById('text_1').value.trim());
    // 获取下拉框当前选中值
    const selectedOpt = document.getElementById('selectlist_1').value;
    // 匹配对应目标地址
    const targetUrl = selectedOpt === 'option_1' 
        ? `https://url1/?=${keyword}` 
        : `https://url2/?=${keyword}`;
    // 执行跳转，需要新标签页打开可替换为 window.open(targetUrl, '_blank')
    window.location.href = targetUrl;
})
</script>

补充说明 #

• 代码中加入encodeURIComponent是为了兼容用户输入中文、空格、特殊符号的场景，避免生成非法URL
• 如果后续需要新增下拉选项，只需要扩展目标地址的匹配逻辑即可，无需修改其他核心代码
• 如果你项目中使用了jQuery，实现逻辑完全一致，仅需要把DOM获取、事件绑定的写法替换为jQuery对应语法即可

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