人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ホームページの検索機能でセレクトメニューを3つ用いた検索フォーム設置したいと思っております。だれかご鞭撻ください。
例えばフォームAに2つの選択肢。フォームBに5つの選択肢、フォームCに4つの選択肢を与えフォームABCでそれぞれ選択した条件により特定のページを表示する。機能を設置したいとおもっております。
宜しくお願いします。

●質問者: quait
●カテゴリ:コンピュータ
✍キーワード:セレクト ホームページ 検索 選択肢
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● lains_you
●60ポイント

以下、三次元配列に遷移する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

◎質問者からの返答

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ