- このスクリプトはリストボタンを変更した時に、選択した項目に設定しておいたページにジャンプします。
-
- 〜 JavaScript 〜
<script language="JavaScript">
<!--
function jump(){
var si = document.frmSample.opSample.selectedIndex;
var url = document.frmSample.opSample.options[si].value;
location.href = url;
}
//-->
</script>
|
- 〜 HTML 〜
<form name="frmSample">
<select name="opSample" onChange="jump()">
<option value="#" selected>▽ ジャンプしたい所を選択してね！！
<option value="/n_rieko/">トップページ
<option value="/n_rieko/pc.htm">オタク度鑑定ページ
<option value="/n_rieko/html/">HTML講座
<option value="/n_rieko/javascript/">JavaScript講座
<option value="/n_rieko/jslibraly/">JavaScriptサンプル集
<option value="/n_rieko/perl/">Perl講座
<option value="/n_rieko/cgi/">CGI講座
<option value="/n_rieko/server/">自宅WEBサーバの構築
</select>
</form> |
- リストボックスのそれぞれのvalueにリンクしたいURLを記述しておきます。
- <option value="/n_rieko/">トップページ
- onChangeイベントは選択している項目が変更されたときに発生するイベントです。変更されたタイミングで関数jumpを起動します。。
- <select name="opSample" onChange="jump()">
- selectedIndexプロパティは現在リストボックスの何番目の要素を選択しているか参照する為のプロパティです。。
- var si = document.frmSample.opSample.selectedIndex;
- selectedIndexプロパティで何番目が選択されているか取得して、そのvalueプロパティで、タグで指定しておいたvalueオプションを参照できます。。
- var url = document.frmSample.opSample.options[si].value;
- locationオブジェクトのhrefプロパティは参照すると現在のURLを返しますが、hrefプロパティへURLを代入するとそのページへジャンプすることが出来ます。
- location.href = url;
| |