根据下拉选项值更改表单选择名称

Question

我有一个如下所示的搜索表单：

<form action="https://someform.foo" target="_blank">
<div class="searchTerm">
<input placeholder="Search here" autofocus="autofocus" id="query" class="searchbox" name="queryString">
<input type="hidden" name="format" value="all">
</div>
    <div class="dropdown">
      <select name="scope" id="searchLibrary" class="custom-dropdown-menu">
        <option name="scope" value="aa:aaaa" selected>Search A</option>
        <option name="subscope" value="bb:bbbb::bb:bbbb">Search B</option>
        <option name="scope" value="cc:cccc">Search C</option>
        <option name="scope" value="dd:dddd">Search D</option>
        <option name="scope" value="">Search E</option>                 
      </select>
    </div>
<input type="submit" class="headersubmit" value="&#xf002;" title="Search">

</form>

提交表单后，用户将被定向到搜索结果页面，其中的 URL 是根据所选选项形成的。下拉选项名称是在 URL（范围）中设置参数名称。

例如，如果用户从选项中选择搜索 A，则 URL 如下所示：

https://someform.foo/?queryString=SomeInput&format=all&scope=aa:aaaa

范围/子范围参数由选择 name 值设置，但如果用户确实从搜索框中选择了搜索 B，我需要在结果 URL 中将“范围”变为“子范围”。

但是选择搜索 B 需要得到这个 URL：

https://someform.foo/?queryString=SomeInput&format=all&subscope=bb:bbbb::bb:bbbb

我无法让参数元素被称为子作用域，它总是被称为作用域。

我一直在尝试一些 jQuery，并且一直在用这个 fiddle 进行测试。我可以让警报出现，告诉我选择名称已更改，但它实际上并没有更改 URL 参数。

感谢所有建议/文档/建议！

Answer 1

提交时，您可以识别所选选项的name 和 value，您可以使用它们来生成 URL：

const searchLibrary = document.querySelector('#searchLibrary');
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const option = searchLibrary.options[searchLibrary.selectedIndex];
  const name = option.getAttribute('name');
  const { value } = option;
  const queryString = document.querySelector('#query').value;
  const url = `https://someform.foo/?queryString=${queryString}&format=all&${name}=${value}`;
  console.log('Redirecting to ' + url);
  // window.open(url);
});

<form action="https://someform.foo" target="_blank">
<div class="searchTerm">
<input placeholder="Search here" autofocus="autofocus" id="query" class="searchbox" name="queryString">
<input type="hidden" name="format" value="all">
</div>
    <div class="dropdown">
      <select name="scope" id="searchLibrary" class="custom-dropdown-menu">
        <option name="scope" value="aa:aaaa" selected>Search A</option>
        <option name="subscope" value="bb:bbbb::bb:bbbb">Search B</option>
        <option name="scope" value="cc:cccc">Search C</option>
        <option name="scope" value="dd:dddd">Search D</option>
        <option name="scope" value="">Search E</option>                 
      </select>
    </div>
<input type="submit" class="headersubmit" value="&#xf002;" title="Search">

</form>