2

这有点令人困惑，但我会尽力解释它。我有 4 个select菜单直接放置在彼此的顶部，并带有absolute定位。在任何时候，其中三个是不可见的（带有display: none;），而其中一个是可见的（带有display: inline;）。我有一个 JavaScript 代码，它检测哪个是可见的，然后它应该获取一个input字段的值，将其附加到 visible 的值上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/

4

1 回答 1

6

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

将表单标签更改为：

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

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

于 2012-12-23T15:04:16.760 回答