javascript - `window.location.href` 正在刷新页面

Question

这有点令人困惑，但我会尽力解释清楚。我有 4 个 select 菜单，它们以 absolute 定位直接放在彼此之上。在任何时候，其中三个是不可见的(使用 display: none;)，而其中 1 个是可见的(使用 display: inline;)。我有一段 JavaScript 代码可以检测哪一个是可见的，然后它应该获取 input 字段的值，将其附加到可见的 select 的值上，然后转到该 URL。

这是代码中的基本思想:

<form onsubmit="goTo()">

    <input type="text" id="query" value="" />

    <select class="service">
      <option value="https://www.google.com/search?q=" selected>Web</option>
      <option value="https://www.google.com/search?tbm=isch&q=">Images</option>
      <option value="https://www.google.com/maps?q=">Maps</option>
    </select>

    <select class="service">
      <option value="http://search.yahoo.com/search?p=" selected>Web</option>
      <option value="http://search.yahoo.com/search/images?p=">Images</option>
      <option value="http://search.yahoo.com/search/video?p=">Videos</option>
    </select>

    <select class="service">
      <option value="http://www.bing.com/?q=" selected>Web</option>
      <option value="http://www.bing.com/images/?q=">Images</option>
      <option value="http://www.bing.com/videos/?q=">Videos</option>
    </select>

    <select class="service">
      <option value="http://www.dogpile.com/info.dogpl.t6.2/search/web?q=" selected>Web</option>
      <option value="http://www.dogpile.com/info.dogpl.t6.2/search/images?q=Greeny">Images</option>
      <option value="http://www.dogpile.com/info.dogpl.t6.2/search/video?q=">Videos</option>
    <select>

    <button type="submit">Search</button>

还有 JavaScript(还有比这更多的代码，但我只包括相关部分:

function goTo() {
  var value
  var elements = document.getElementsByClassName('service');
    for (var i = 0; i < elements.length; i++) {
      if(elements[i].style.display === 'inline') {
        value = elements[i].value;
        window.location.href = value + document.getElementById("query").value;
        break;
      }
    }
}

我的问题是，当我点击提交时，页面会重新加载。

http://jsfiddle.net/9BLAv/3/

Answer 1

您需要停止“提交”事件的默认操作，即重新加载页面。

将表单标签更改为:

<form onsubmit='goTo(); return false'>

您也可以通过操纵事件对象显式阻止默认操作来实现此目的，但我认为从处理程序返回 false 是非常普遍的做法。