如何通过Selector实现主链接动态拼接并跳转？

问题说明 #

需要实现：存在一个默认主链接，选择下拉选项后，将选项内容拼接在主链接后，点击按钮跳转到新页面。

原代码存在的问题 #

• 按钮的type属性错误，写成了submiti，应为submit
• JS字符串拼接语法错误，引号嵌套混乱
• 未定义country_value变量，且存在多余的无效变量引用
• 未阻止表单默认提交行为，点击按钮会触发页面刷新

修正后的完整代码 #

HTML部分

<form method="get" action="">
  <select id="instagram">
    <option value="">Select Location</option>
    <option value="1">The Rock</option>
    <option value="2">Will Smith</option>
  </select>
  
  <button type="submit" id="buttonId">Submit</button>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

JavaScript部分

jQuery(document).ready(function() {
  jQuery("#buttonId").click(function(e) {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    // 获取选中选项的文本内容
    var selectedName = $('#instagram option:selected').text();
    // 按需定义country参数，示例值为"US"，可根据实际场景动态获取
    var country_value = "US";
    
    // 正确拼接链接并跳转
    window.location.href = "https://instagram.com/" + selectedName + "/" + country_value;
  });
});

关键实现要点 #

• 必须通过e.preventDefault()阻止表单默认提交逻辑，否则会覆盖跳转行为
• 字符串拼接时注意引号的正确使用，变量直接通过+与字符串段连接
• 若需要使用选项的value而非文本内容，可替换为$('#instagram').val()
• country_value可根据需求改为动态获取（比如从其他输入框、隐藏域读取）

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