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

ホームページにおける、セレクトメニューのhtml記述についてお伺い致します。

今、セレクトメニューを4つ配置します。
それぞれ選択項目数は2つ(「はい」「いいえ」)です。
※よって選択の仕方は16通りあります。

4つを選択して「検索」ボタンを押すと、16通り準備された各htmlファイルへ選択パターン別に移動
するようなページを作りたいのですが、どのような記述をすればよいのか教えて頂ければ幸いです。
どうぞよろしくお願い致します。

※セレクトメニューは複数選択できないようにしたいです。
※htmlは超初心者ですのでよろしくです。
※イメージが伝わりにくいようでしたら、コメント欄も使ってください。

●質問者: yoshifuku
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML イメージ コメント欄 セレクト パターン
○ 状態 :終了
└ 回答数 : 1/4件

▽最新の回答へ

1 ● Cherenkov
●60ポイント ベストアンサー

こんな感じですかね...

IE8とFirefox3.5.5で確認。

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script type="text/javascript">
/*
チェック項目の答えを0と1に置き換えて、16通りのページに振り分けるようにしました。
変数numに0?15の数字が入ります。
例えば用意するページの名前をresult_2.htmlにする場合は
"http://?/page/result_" + num + ".html";
"文字列" + 変数 + "文字列" のようにします。

*/

function init(){
 //問題の数を設定。
 var mondai_length = 4;

 var input = document.getElementsByTagName('input');
 var submit_btn = document.getElementById('submit_btn');

 //更新したり戻るを行うとチェックが残ってるので、それを初期化。
 for(var i=0; i<input.length; i++){
 if(input[i].type=="radio"){
 input[i].checked = false;
 }
 }
 submit_btn.setAttribute("disabled", true); //これも初期化。


 //すべての問題を答えないと検索ボタンを押せないようにする。
 document.getElementById('question').onclick = function(){
 var checked_length = 0;
 var n_input = document.getElementsByTagName('input');
 for(var i=0; i<n_input.length; i++){
 if(n_input[i].checked){
 checked_length++;
 }
 }
 if(mondai_length == checked_length){
 submit_btn.removeAttribute("disabled");
 }
 };

 //検索ボタンを押すとチェックされた値を取得し、16通りのページに振り分ける。
 var button = document.getElementById('submit_btn');
 button.onclick = function(){
 var p = [];
 var input = document.getElementsByTagName('input');
 for(var i=0; i<input.length; i++){
 if(input[i].type=="radio" && input[i].checked){
 p.push(input[i].value);
 }
 }
 var num = parseInt(p.join(''), 2); //変数numに0?15の数字が入る
 location.href = "http://en.wikipedia.org/wiki/19" + num;
 };
}
</script>
</head>
<body onload="init()">
<form id="question" name="f">
<p>人間ですか<br>
<input type="radio" name="q1" value="1"> はい
<input type="radio" name="q1" value="0"> いいえ
</p>
<p>牛乳は好きですか<br>
<input type="radio" name="q2" value="1"> はい
<input type="radio" name="q2" value="0"> いいえ
</p>
<p>猫派ですか<br>
<input type="radio" name="q3" value="1"> はい
<input type="radio" name="q3" value="0" > いいえ
</p>
<p>これでわかりますか<br>
<input type="radio" name="q4" value="1"> はい
<input type="radio" name="q4" value="0" > いいえ
</p>
<p><input id="submit_btn" type="button" value="検索する" disabled></p>
</form>
</body>
</html>
◎質問者からの返答

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

理想通りのことができました。

いるか贈ります!

関連質問


●質問をもっと探す●



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