@blog.justoneplanet.info

日々勉強

selectのoptionをJavaScriptで入れ替えよう

■どういうことかというと

1つ目のselectの選び方によって2つ目のselectの表示を変更する。

■サンプル

■注意点

JavaScriptを使えない環境(携帯など)や、JavaScriptをOFFにしている人は当然この選択肢が選べないので、アプリケーションや登録フォームなど、基幹となる部分で使用する場合、上記の人への対策を施すべきである。

■サンプルソース(HTML)

<form action="#">
<select name="type" id="type">
<option value="hiragana">ひらがな</option>
<option value="alpha">アルファベット</option>
<option value="number">数字</option>
</select>
<select name="figures" id="figures">
<option value=""></option>
</select>
</form>

■サンプルソース(JavaScript)

window.onload = function(){
	var optionValuesAry = new Array(
		new Array('あ','い','う'),
		new Array('a','b','c'),
		new Array('1','2','3')
	);
	var changeOption = function(){
		var selectedNum;
		for(var i=0; i&lt;document.getElementById('type').options.length; i++){
			if(document.getElementById('type').options[i].selected){
				selectedNum = i;
			}
		}
		for(var i=0; i&lt;document.getElementById('figures').options.length; i++){
			document.getElementById('figures').options[i] = null;
		}
		for(var i=0; i&lt;optionValuesAry[selectedNum].length; i++){
			document.getElementById('figures').options[i] = new Option(optionValuesAry[selectedNum][i]);
		}
		document.getElementById('figures').options[0].selected = true;
	}
	document.getElementById('type').onchange = function(){
		changeOption();
	}
	changeOption();
}

■解説

2番目の選択肢の定義

1番目の選択肢の順番に応じた2番目の選択肢を定義する。

var optionValuesAry = new Array(
    new Array('あ','い','う'),
    new Array('a','b','c'),
    new Array('1','2','3')
);

選択項目の判定

以下のコードを1番目のセレクトの特定イベントに関連付ける事で判定する。

var selectedNum;
for(var i = 0; i < document.getElementById('type').options.length; i++){
    if(document.getElementById('type').options[i].selected){
        selectedNum = i;
    }
}

2番目のセレクトの操作

一旦、全てのoptionを何も入ってない状態にする。1番目の選択を変えた後の2番目の選択肢が、変える前よりも少なかった場合に、差分の選択肢が残ってしまうといった不具合を防ぐ目的が以下のコードにはある。

for(var i=0; i < document.getElementById('figures').options.length; i++){
    document.getElementById('figures').options[i] = null;
}

2番目のセレクトにそれぞれの値をセット

上述によって判定した、「1番目の選択されているもの」に対応した「2番目の選択肢」を1つ1つセットする。

for(var i=0; i < optionValuesAry[selectedNum].length; i++){
    document.getElementById('figures').options[i] = new Option(optionValuesAry[selectedNum][i]);
}

2番目のセレクトをセット

以下のコードで、2番目の選択肢の最初の選択肢を選択させる

document.getElementById('figures').options[0].selected = true;

読み込み直後の表示

人為的に選択されるまで、2番目に何も入ってない状態が起こってしまうため、ロード時に以下の関数が実行されるようにする。

changeOption();

PHPからリファラーを取得しよう

■結論

$_SERVER['HTTP_REFERER']

上記、スーパーグローバル変数にリファラーがセットされています。

■注意

これをいくら書き換えようとしてもユーザーから送信されてくる値は変化しません。

JavaScriptでリファラーをセットしよう(Ajax通信)

■結論

function createXMLHttpRequest(){
	if(window.XMLHttpRequest){return new XMLHttpRequest();}
	else if(window.ActiveXObject){
		try{return new ActiveXObject("MSXLM2.XMLHTTP");}
		catch(e){
			try{return new ActiveXObject("Microsoft.XMLHTTP");}
			catch(e){return null;}
		}
	}
	return null;
}
function getData(){
	var request = createXMLHttpRequest();
	request.open('POST', /*特定のURL*/);
	request.onreadystatechange = function(){
		if(request.readyState == 4 && request.status == 200){
			var res = request.responseXML
		}
	}
	request.setRequestHeader('content-type', 'application/x-form-urlencoded');
	request.setRequestHeader('referer', /*リファラーにセットしたいURL*/);
	request.send("");
}

■解説

簡単に言うと、Ajax通信をする前に、Ajax通信をする際のリクエストヘッダーをsetRequestHeaderメソッドで変更する感じです。

JavaScriptで出来ない事

様々な検索キーワードでこのサイトに来てくれてるようなんですが、明らかに「勘違いかな?」と思われるワードもあるので一応、書いておきます。

■JavaScriptだけでサーバーに何かデータを保存(もしくは削除)できるのか?

できません。

何らかのサーバーサイドで動くプログラムが必要になります。

■JavaScriptだけでデーターベースに接続したりデータを修正したりできるのか?

できません。MySQLをはじめ、どんなDBでも出来ません。

■機密情報の取り扱い

できません。

基本的にソースはユーザーに丸見えです。

■ソースの隠蔽

できません。

難読化は出来ますが、それを分かり易くするツールもあります。また、あくまでも読みづらくなるだけです。

■クライアント側に保存されているデータへのアクセス

Cookie以外のデータにはアクセスできません。

■まとめ

JavaScriptとはユーザーのPCに渡す処理手順のようなもので、ユーザーのPCの中でのみ動作し、処理するデーターはユーザー側に渡す必要がある。すなわち機密データやアカウント情報などはサーバー側で保持せねばならず、JavaScript(HTML、CSSそのほかクライアントに送られるデータ)には決して書いてはイケナイ。またAjaxで通信する場合も、サーバー側には平のテキストのような文章しか通信で送れず、それを元にサーバー側で何らかの処理(DBとの接続、データの書き込み、削除など)をする場合は、JavaScriptから送られた通信を元にして、処理をするサーバーサイドのプログラムが必要になる。

metaタグでリダイレクトしよう

■結論

headタグ内に以下のような記述を加える。

<meta http-equiv="refresh" content="リダイレクトまでの時間; URL=リダイレクト先URL" />

■例

60秒後にGoogleへジャンプします。

<meta http-equiv="refresh" content="60; URL=http://www.google.co.jp/" />

画像置換がうまく出来ない(Netscape7.1バグ)

■結論

以下のように、バックグラウンドの指定はx軸指定、y軸指定ともにpxで指定しよう!

background-position: -100px -35px;

■理由

以下のような指定はNetscape7.1に認識されない為である。

background-position: -100px bottom;