Question

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

以下是代码中的基本概念：

<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非常普遍。

`window.location.href`只是刷新页面

1 个答案: