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


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

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

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

回答の条件
  • 1人1回まで
  • 登録:2009/11/11 10:42:05
  • 終了:2009/11/14 18:11:34

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922009/11/11 13:44:06

ポイント60pt

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

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>
id:miku1973

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

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

いるか贈ります!

2009/11/14 18:11:26
  • id:kn1967
    イメージは判りますがHTMLだけでは無理ですよ。

    方法としては
    (1)クライアントサイドで処理
      16個のHTMLファイルを準備
      ブラウザ側でJAVASCRIPTなどを使って、どれか1つをチョイスして呼び出す。
    (2)サーバサイドで処理
      phpやperlなどを使って、
      送られてきた4つのパラメータによって出力内容を変える
    などになります。

    その場限りの対応として簡単な方法は(1)となりますが、
    将来的にメニューの増減があったり、細かな書き換えが発生する場合は、
    より応用を利かせて(2)になります。
    ExcelVBAなどをお使いなので、どちらも選択可能かと思いますが、
    今回要求されている仕様はどちらに相当しそうですか?
  • id:miku1973
    ありがとうございます。
    (1)です。
     
    1回作ってしまえば、変更は将来的にも無い予定です。

    セレクトメニューを使ったものでなくても、似たようなものができればいいなと思っています。

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

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

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

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