セレクトメニューの利用
広告
ここではセレクトメニューで選択された項目によって異なる動作を行うようにしてみます。
HTMLページ内に記述されたセレクトメニューの値をJavaScriptで取得するにはDOMを用いることで可能です。セレクトメニューにIDを指定して値を取得します。
<html> <head> <title>セレクトメニューテスト</title> </head> <body> <h1>セレクトメニューテスト</h1> <form> <select id="game" name="gameselect"> <option value="ds">NINTENDO DS</option> <option value="ps3">PlayStation3</option> <option value="wii">Wii</option> </select> <input type="button" value="ファイル読み込み" onClick="loadText()"> </form> <div id="disp"></div> </body> </html>
上記のようなHTMLページがあった場合に、現在選択されているセレクトメニューの値を取得するには次のように行います。
var selectgame = document.getElementById("game").value;
セレクトメニューの場合には各メニューに設定した値が取得できます。
サンプルページ
今回はHTMLページ内のフォーム上のボタンをクリックすると、セレクトメニューで現在選択されている値に対応したファイルをサーバから読み込み、そのファイルの中身を指定した位置に表示するようにします。
セレクトメニューの場合は各メニューに設定した値を取得できますので、ラジオボタンやチェックボックスの時とは少し違う記述をしています。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>セレクトメニューテスト</title>
<script type="text/javascript">
<!--
var xmlHttp;
function loadText(){
var selectgame = document.getElementById("game").value;
var fileName = "http://www.ajaxtower.jp/sample/" + selectgame + ".txt";
if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp = null;
}
}
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open("GET", fileName, true);
xmlHttp.send(null);
}
function checkStatus(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
var node = document.getElementById("disp");
node.innerHTML = xmlHttp.responseText;
}
}
// -->
</script>
</head>
<body>
<h1>セレクトメニューテスト</h1>
<form>
<select id="game" name="gameselect">
<option value="ds">NINTENDO DS</option>
<option value="ps3">PlayStation3</option>
<option value="wii">Wii</option>
</select>
<input type="button" value="ファイル読み込み" onClick="loadText()">
</form>
<div id="disp"></div>
</body>
</html>
まずHTMLページを表示すると次のように表示されます。
セレクトメニューで1つ選択してからフォームのボタンをクリックするとセレクトメニューに対応したファイルをサーバから読み込みHTMLページの指定の箇所を書き換えます。
他のメニューを選択した場合は次のようになります。
( Written by Tatsuo Ikura )
AjaxTower