実行例

function myGo(){	// コンボボックスからリンク先を選択した
mySelect = document.myForm.myMenu.selectedIndex;	// 選択した番号を取得
if(mySelect!=0) location.href = myTable[mySelect-1];	// 選択した所へリンク
}

function myRndLink(){	// ランダムリンクを選択した
myRnd = Math.floor( Math.random() * myTable.length );	// 0～(URLの数-1)の乱数を求める
location.href = myTable[myRnd];	// リンクする
}

// --></script>
<form name="myForm">
<select name="myMenu" size="1" onchange="myGo()">
<option>★☆★☆リンク先を選んでください☆★☆★</option>
<option>はじめに </option>
<option>Step.1 いきなりJavaScriptを使ってみましょう </option>
<option>Step.2 あいさつ文を表示してみましょう </option>
<option>Step.3 現在の日付と時間を表示してみましょう </option>
</select>
<input type="button" value="ランダムリンク！" onclick="myRndLink()">
</form>

function myGo(){                  // コンボボックスからリンク先を選択した
 mySelect = document.myForm.myMenu.selectedIndex;   // 選択した番号を取得
 if(mySelect!=0)location.href=myTable[mySelect-1];  // 選択した所へリンク
}

function myRndLink(){                      // ランダムリンクを選択した
  myRnd = Math.floor( Math.random() * myTable.length ); // 0～(URLの数-1)の乱数を求める
  location.href = myTable[myRnd];          // リンクする
}
// --></script>

<form name="myForm">
<select name="myMenu" size="1" onchange="myGo()">
<option>★☆★☆リンク先を選んでください☆★☆★</option>
<option>はじめに </option>
<option>Step.1 いきなりJavaScriptを使ってみましょう </option>
<option>Step.2 あいさつ文を表示してみましょう </option>
<option>Step.3 現在の日付と時間を表示してみましょう </option>
</select>
<input type="button" value="ランダム リンク！" onclick="myRndLink()">
</form>

サンプルだけの HTMLはこちらへ

説明

今回のサンプルは、
Step.26　「コンボボックスを使って、目次を作りましょう　その２」　と、
Step.61　「ランダムリンクボタンを作ってみましょう」　を、セットにしたものです。

つまり、コンボボックスから、任意のリンク先を選ぶこともできるし、ランダムボタンでリスト内のいずれかをランダムに選択してリンクできるようにしたものです。

myTable のURLは、コンボボックス選択、ランダムボタンの両方で使います。
よって、このテーブルのURLの並びは、<OPTION>タグの並びと同じでなければいけません。

コンボボックスの第1テーブルは、「★☆★☆リンク先を選んでください☆★☆★」という、リンク先のないタイトルにしました。
ですから、myGo()内の、
if ( mySelect != 0 ) location.href = myTable[mySelect-1];
つまり、mySelect が０の場合は上のタイトルを選択した場合なので、スルーするようにしています。
mySelect を 1 引いているのは、タイトルが余分にテーブルにいるので、1 を引いて、myTable の番号にあわせています。

参考ステップ
Step.7 履歴移動ボタンをつくってみましょう　※ location.href
Step.13 リンク先を新しいウィンドウで表示してみましょう　※ window.open
Step.14 九九の問題に答えてみましょう　※ Math.random
Step.25 プルダウンメニューを使って目次を作りましょうその１　※ コンボボックス
Step.26 プルダウンメニューを使って目次を作りましょうその２　※ コンボボックス
Step.61 ランダムリンクボタンを作ってみましょう　

▲TOP