選択ボックスからページを移動する方法

By | 2016/05/14

JavaScriptのlocationオブジェクトを利用して、ページの移動を制御する簡単なプログラムを作成しました。このプログラム自体は大したことはありませんが、Webサイトをよりシンプルに素早く作成するのに役立つかもしれません。またJavaScriptの勉強中の方にも役立つかもしれませんね。

参考に利用ください!


<body>
<script type="text/javascript">
function jump(elem){
 //選択ボックスの選択が変更されたタイミングで実行
 var isbn = elem.value;
 //選択ボックスから取得した値をもとにリンク先のURLを生成
 location.href = 'http://htmlcsslaboratory.com/' + isbn;
}
</script>
<form name="fm">
 <select name="post" onchange="jump(this)">
 <option value="">---投稿を選択してください---</option>
 <option value="選択ボックスからページを移動する方法">選択ボックスからページを移動する方法</option>
 <option value="JavaScriptでサブウィンドウを生成してみる">JavaScriptでサブウィンドウを生成してみる</option>
 <option value="「前置演算」と「後置演算」を分かりやすく比較">「前置演算」と「後置演算」を分かりやすく比較</option>
 <option value="見出しのデザインをアレンジしてみました!">見出しのデザインをアレンジしてみました!</option>
 </select>
</form>
</body>

[demo]

 

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

Pocket

コメントを残す

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