12


8

このページは私が望むようにそれをします:http://www.web-source.net/javascript_redirect_box.htm

しかし、私はjQueryを使用してより良い方法を見つけたいのですが、誰かがこれを達成するためにjQueryを使用する良いスクリプトを私に示すことができますか?

5 Answer


44


これにはあらかじめパッケージ化されたスクリプトは必要ありません。数行のコードで済みます。

// get your select element and listen for a change event on it
$( '#selectEl')。change(function(){//ウィンドウのlocationプロパティを、ユーザーが選択したオプションの値に設定します。location = $(this).val();});


18


他の人はこれを行う方法について良い答えを与えているが…​

単なる警告ですが、IEは選択リストの変更を他のブラウザとは非常に異なる方法で処理します。 すべてのキーのアップ/ダウンの押下がonChangeイベントとしてカウントされます。つまり、キーボードを使用してリダイレクト選択リストをナビゲートすることはできず、マウスを使用できないユーザーにとってはアクセシビリティが損なわれます。 (他のブラウザは、onChangeを起動する前に、 "enter"イベント、または選択リストからのタブを待ちます。)私はこのための回避策をハックしようとして長い時間を費やしましたが、問題を完全に解決することはありませんでした。

jQueryがこれを説明しているかどうかはわかりません。うまくいけば、あなたのサイトのアクセシビリティのためにそうなるでしょう。

選択リストに移動先を選択させ、その横にボタンをクリックして実際にリダイレクトを有効にすることをお勧めします。 (あなたがIEユーザーのアクセシビリティを気にしないのでない限り)


8


私はこれをテストしていませんが、それはあなたが参照したページのサンプルと同等だと思います。

$(document).ready(function(){$( '#select')。change(function(){location.href = $(this).val();});});

場所を選択場所その他


3


jQueryを使う:

$( '#selectEl')。bind( "change keyup"、function(){//ウィンドウのlocationプロパティを//ユーザーが選択したオプションの//値に設定します。window.location = $(this).val() ;});

通常のオプションや矢印キーの変更に有効です。

この拡張機能を使うことができるでしょう:http://plugins.jquery.com/project/mousewheelまだ試していません。 :)

bind()に追加できるマウスオプションもあります。 api.jquery.com/category/events/mouse-events/にアクセスしてください。そのページにはname()という関数があります。上記のbind()で 'name’を使用できます。 私がchange()⇒ 'change’とmouseup()⇒ 'mouseup’を使ったのと同じように - 簡単です。 :)

  • 平和!


2


Danielが示唆しているように、単純な答えはそうです - あなたはこれを行うべきではありません、それはユーザビリティとアクセシビリティのために悪いです。

選択リストの動作は、ユーザーのOS、ブラウザ、およびユーザー設定(両方の場合)の組み合わせによって異なります。 それに加えて、onchangeイベントはブラウザ間で標準的な方法では実装されていません。

マウス、キーボード、マウスホイールのいずれを使用しているか(音声、スクリーンリーダーなど)を問わず、ユーザーは選択リストから予想される動作を実行できるはずです。 あなたがイベントをonchangeにバインドするならば、それは決してselectリストからユーザの焦点を奪うものであるべきではありません。 ページリダイレクト

(個人的にはキーボードを使用してサイトフォームを頻繁にナビゲートします。これが発生した場合は私は絶叫します)