JSFiddle - React, Tailwind, and code Playground

HTML

<form action="option1.html">
  <!-- заменяем атрибут "name" на "data-name" -->
  <!-- в таком случае, форма не будет посылать ?f= -->
  <select data-name="f">
    <option value="">any</option>
    <option value="s1">вася</option>
    <option value="s2">петя</option>
    <option value="s3">коля</option>
  </select>

  <select data-name="f">
    <option value="">any</option>
    <option value="o1">Чебурашка</option>
    <option value="o2">Крокодил Гена</option>
    <option value="o3">Шапокляк</option>
  </select>

  <select data-name="k">
    <option value="">any</option>
    <option value="z1">100</option>
    <option value="z2">200</option>
  </select>

  <!-- сюда будем складывать готовые значения ?f=s1, o1 -->
  <!-- в виде скрытых полей (костылей) input type="hidden" -->
  <div data-hidden>
  </div>

  <input type="submit" value="Отправить">

</form>

JavaScript

document.forms[0].onsubmit = function () {
  var key, hash, inputs = document.querySelectorAll("[data-name]");
  inputs = Array.prototype.slice.call(inputs); // преобразуем NodeList to Array

  // reduce() - см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
  // в старых браузерах нет, юзай polyfill для нее
  hash = inputs.reduce(function (hash, input) {
    var key = input.getAttribute("data-name");
    hash[key] = hash[key] || [];
    if (input.value) {
      hash[key].push(input.value);
    }
    return hash;
  }, {});

  // на выходе hash = { f: ['s1','o1'], k: [100] }
  var input, hidden = document.querySelector("[data-hidden]");
  hidden.innerHTML = ''; // очищаем наш костыль <div data-hidden>

  for (key in hash) {
    input = document.createElement('INPUT');
    input.name = key;
    input.value = hash[key].join(", ");
    input.type = "hidden";
    // создаем <input type="hidden" name="f" value="s1, o1" />
    hidden.appendChild(input);
  }
}