HTML表单基于选择选项更改url参数

<select id="option" onchange="changeURLParam()">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

function changeURLParam() {
  var selectedOption = document.getElementById("option").value;  // 获取选择的选项值
  var currentURL = window.location.href;  // 获取当前页面的URL
  var newURL = "";  // 新的URL

  // 检查当前URL是否已经存在参数
  if (currentURL.indexOf("?") !== -1) {
    var urlParts = currentURL.split("?");  // 将URL分成两部分
    var baseURL = urlParts[0];  // 获取基础URL（不包含参数部分）
    var params = urlParts[1];  // 获取参数部分

    // 检查参数部分是否包含其他参数
    if (params.indexOf("&") !== -1) {
      var paramList = params.split("&");  // 将参数部分分割成参数列表
      var updatedParams = [];

      // 更新参数列表中的对应参数值
      for (var i = 0; i < paramList.length; i++) {
        var paramName = paramList[i].split("=")[0];  // 获取参数名

        // 如果参数名为"option"，则更新其值为选择的选项值
        if (paramName === "option") {
          updatedParams.push("option=" + selectedOption);
        } else {
          updatedParams.push(paramList[i]);
        }
      }

      // 构建新的参数部分
      newURL = baseURL + "?" + updatedParams.join("&");
    } else {
      // 参数部分只包含一个参数
      var paramName = params.split("=")[0];  // 获取参数名

      // 如果参数名为"option"，则更新其值为选择的选项值
      if (paramName === "option") {
        newURL = baseURL + "?option=" + selectedOption;
      } else {
        newURL = baseURL + "?" + params + "&option=" + selectedOption;
      }
    }
  } else {
    // 当前URL没有参数，直接添加参数
    newURL = currentURL + "?option=" + selectedOption;
  }

  // 使用新的URL进行页面跳转
  window.location.href = newURL;
}