2

ちょっとややこしいですが、できる限りわかりやすく説明したいと思います。私は4つselectのメニューを配置して互いに直接重ねていますabsolute。いつでも、そのうちの 3 つが非表示 ( ) で、そのうちのdisplay: none;1 つが表示されます ( 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 に答える