プルダウンから違うページに遷移をさせる方法【jQuery】

 プルダウンから違う画面に遷移させる

今回は、プルダウンから違うページに遷移をさせる方法についてです!

<option><a href=”URL”>Google</a></option>

どうやら、プルダウンには<a>タグがきかないらしい??

上記がDemoになります。

作業の流れとしては、まずHTMLを書きます。<select>タグさえ使えば簡単にプルダウンが作れるので覚えておきましょう!

できたHTMLに対して、下記のjQueryを実装します。

やっている内容のポイントとしては、$(‘[name=select]’)が変わった時.changeというコードを組んであげて$(‘[name=select] option:selected‘).text(); 今何が選ばれているか?という変数を作ります。(txt)

次に、if文を使って条件をつけてあげます!
ここで変数を使っているのですが、txtは選ばれた文字なので (txt == ‘Google’) だとすると、もしプルダウンでGoogleが選ばれたら{}の中身のことを実行するというような式になります。後はここに遷移したいリンク先を書くだけ。

window.location.href = “遷移先” というような流れになります。意外と簡単でした!このプルダウンをCSSでカスタマイズするのがかなり難しいのですが、、

それは次回に書きたいと思います。プルダウンは便利なので、ぜひ参考にしてみてください!

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です