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”需要输入以下网址：

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>

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

1 个答案: