ホームページの検索機能でセレクトメニューを3つ用いた検索フォーム設置したいと思っております。だれかご鞭撻ください。

例えばフォームAに2つの選択肢。フォームBに5つの選択肢、フォームCに4つの選択肢を与えフォームABCでそれぞれ選択した条件により特定のページを表示する。機能を設置したいとおもっております。
宜しくお願いします。

回答の条件
  • 1人10回まで
  • 登録:2006/08/01 08:58:35
  • 終了:2006/08/08 09:00:02

回答(1件)

id:lains_you No.1

lains_you回答回数50ベストアンサー獲得回数102006/08/01 11:55:43

ポイント60pt

 以下、三次元配列に遷移するURLをすべて保持しておき、select要素の選択項目のインデックスselectedIndexの値から指定のURLを取り出し、そのURLをダイアログに表示した後、遷移するJavaScript。

<html>
<head>
<script type="text/javascript">
var url_list = new Array(
	new Array(					//selectA-1
		new Array(				//selectB-1
			"page1-1-1.html",	//selectC-1
			"page1-1-2.html",	//selectC-2
			"page1-1-3.html",	//selectC-3
			"page1-1-4.html"	//selectC-4
		),
		new Array(				//selectB-2
			"page1-2-1.html",	//selectC-1
			"page1-2-2.html",	//selectC-2
			"page1-2-3.html",	//selectC-3
			"page1-2-4.html"	//selectC-4
		),
		new Array(				//selectB-3
			"page1-3-1.html",	//selectC-1
			"page1-3-2.html",	//selectC-2
			"page1-3-3.html",	//selectC-3
			"page1-3-4.html"	//selectC-4
		),
		new Array(				//selectB-4
			"page1-4-1.html",	//selectC-1
			"page1-4-2.html",	//selectC-2
			"page1-4-3.html",	//selectC-3
			"page1-4-4.html"	//selectC-4
		),
		new Array(				//selectB-5
			"page1-5-1.html",	//selectC-1
			"page1-5-2.html",	//selectC-2
			"page1-5-3.html",	//selectC-3
			"page1-5-4.html"	//selectC-4
		)
	),
	new Array(					//selectA-2
		new Array(				//selectB-1
			"page2-1-1.html",	//selectC-1
			"page2-1-2.html",	//selectC-2
			"page2-1-3.html",	//selectC-3
			"page2-1-4.html"	//selectC-4
		),
		new Array(				//selectB-2
			"page2-2-1.html",	//selectC-1
			"page2-2-2.html",	//selectC-2
			"page2-2-3.html",	//selectC-3
			"page2-2-4.html"	//selectC-4
		),
		new Array(				//selectB-3
			"page3-3-1.html",	//selectC-1
			"page3-3-2.html",	//selectC-2
			"page3-3-3.html",	//selectC-3
			"page3-3-4.html"	//selectC-4
		),
		new Array(				//selectB-4
			"page4-4-1.html",	//selectC-1
			"page4-4-2.html",	//selectC-2
			"page4-4-3.html",	//selectC-3
			"page4-4-4.html"	//selectC-4
		),
		new Array(				//selectB-5
			"page5-5-1.html",	//selectC-1
			"page5-5-2.html",	//selectC-2
			"page5-5-3.html",	//selectC-3
			"page5-5-4.html"	//selectC-4
		)
	)
);

function select(){
	var selectA = document.getElementById("selectA");
	var selectB = document.getElementById("selectB");
	var selectC = document.getElementById("selectC");
	var url = url_list[selectA.selectedIndex][selectB.selectedIndex][selectC.selectedIndex];
	
	alert(url);
	window.location = url;
}
</script>
</head>
<body>

<select id="selectA">
	<option value="1">1</option>
	<option value="2">2</option>
</select>

<select id="selectB">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
</select>

<select id="selectC">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>

<button onclick="select();">click</button>

</body>
</html>

 三次元配列を使用せずに、switchで振り分ける方法もありますが、どちらにしろ大した違いはないと思います。

 JavaScriptを使用せずにサーバ側で処理する場合も、連想配列などにURLを保持し、CGIに渡されるselect要素の値で振り分けるようにすれば可能です。


 下記はダミーです。(JavaScriptなどの参考になります)

とほほのWWW入門

 http://www.tohoho-web.com/www.htm

id:quait

早速のご回答ありがとうございます。

イメージした通りでした。

さすがです!ありがとうございました!

2006/08/01 14:16:21

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません