• ベストアンサー

プルダウンメニューの表示変更

アンケートを採る際にプルダウンメニューを使用したいのですが、 「大カテゴリ」-「小カテゴリー」という区分けをしようと思っています。 この場合、最初に「大カテゴリ」を選択したら「小カテゴリ」は自動的に「大カテゴリ」に対応したメニューのみに切り替えることは可能でしょうか? 以下のようなイメージなのですが、どのような技術を使用するのかお教え頂ければ幸いです。 -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* Q.お出かけ先は? 【大カテゴリ】  【小カテゴリ】 「遊園地」   → 「絶叫系」         → 「ほのぼの系」         → 「両方」 「生き物」   → 「動物園」         → 「水族館」 -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* 何卒宜しくお願い致します。

  • Nosio
  • お礼率79% (31/39)
  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
回答No.3

こんな感じでどうでしょ? 一応、私が確認用に使っているブラウザ7種で正常に 動きました。 <html> <head> <title>SELECTの変動</title> <script type="text/javascript"> var oya = new Array(); oya[0] = "遊園地"; oya[1] = "生き物"; var chi = new Array(); chi[0] = new Array(); chi[0][0] = "絶叫系"; chi[0][1] = "ほのぼの系"; chi[0][2] = "両方"; chi[1] = new Array(); chi[1][0] = "動物園"; chi[1][1] = "水族館"; function Init(){ document.myform.aaa.length=0; for(var i=0; i<oya.length; i++ ){ var op = document.createElement("option"); op.value = i; op.appendChild(document.createTextNode(oya[i])); document.myform.aaa.appendChild(op); } SetChild(); } function SetChild(){ var index = document.myform.aaa.selectedIndex ; var c = chi[index]; document.myform.bbb.length = 0; for(var i=0; i<c.length; i++ ){ var op = document.createElement("option"); op.value = i; op.appendChild(document.createTextNode(c[i])); document.myform.bbb.appendChild(op); } } </script> </head> <body onLoad="Init();"> <form name="myform"> <select name="aaa" onChange="SetChild();"></select> <select name="bbb"></select> </form> </body> </html>

Nosio
質問者

お礼

karumakaruma 様 コードまで書いて頂いてありがとうございます! 早速試したのですが問題なく動きました。 作成中のフォームに組み込んでみようと思います。 本当にありがとうございました。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

javascriptだけでなくAjaxまで使えば、動的に小カテゴリを 呼び出せます。 また大カテゴリを選んだときにサーバーにデータをおくり PHPやCGIなどのサーバー処理で小カテゴリを作成して表示させる という手もあります。

Nosio
質問者

お礼

yambejp様 御回答頂きありがとうございます。 できればPHPやCGIのサーバー処理をやりたいのですが、ちょっと技術的に難しそうです。。。 勉強してみます!ありがとうございました。

  • 1E-9
  • ベストアンサー率51% (22/43)
回答No.1

対応ブラウザはどこまでを想定していらっしゃいますか? IE対応であれば、Javascript http://usagi-js.com/sample/jssample4_2.htm 「サンプル30」で対応できると思います。 ただ、自分でやってみたらNNやFireFoxで動かなかったので、 ASPが使えるようであれば、参考URLのサンプルがお勧めです。 アレンジすればデータベースからプルダウンの内容を引っ張って くることもできました。

参考URL:
http://www.geocities.co.jp/SiliconValley/4334/unibon/asp/selectframedb.html
Nosio
質問者

お礼

1E-9 様 御回答ありがとうございます。 できればIE以外も対応したいので、まずは「サンプル30」をテストしてみて、それから参考URLを詳しく読み込んでみようと思います。 手探りですが頑張ろうと思います。

関連するQ&A

  • 【再掲】プルダウンメニューの表示変更

    http://okwave.jp/qa2610879.htmlで質問した者です。 karumakaruma 様に以下の御回答を頂いて下記の表示が出来たのですが、確認用画面に値を引き渡すことが出来なかったため再度質問です。 勝手に締め切ってしまった恐縮ですが、お教え頂ければ幸いです。 ■質問内容 ******************************* アンケートを採る際にプルダウンメニューを使用したいのですが、 「大カテゴリ」-「小カテゴリー」という区分けをしようと思っています。 この場合、最初に「大カテゴリ」を選択したら「小カテゴリ」は自動的に「大カテゴリ」に対応したメニューのみに切り替えることは可能でしょうか? 以下のようなイメージなのですが、どのような技術を使用するのかお教え頂ければ幸いです。

    • ベストアンサー
    • HTML
  • 和歌山県でオススメスポット

    和歌山県にこの夏旅行に行こうと思うんですがどこかいい遊園地or水族館はありませんか? 遊園地は絶叫系やジェットコースターなど沢山のアトラクションなどがある場所。 水族館は珍しくおもしろい生き物などがいる場所。 この夏を満喫するエンターテイメントを教えてください。 お願いします。

  • 遊園地と動物園と水族館

    遊園地・動物園・水族館で、好きな順番は何ですか? 私は、遊園地→動物園→水族館 です。

  • プルダウンメニューの利用

    htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。 プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。 どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。 よろしくお願いします。

  • プルダウンメニューに連動するチェックボックス

    はじめまして。 よろしくお願いいたいます。 以前、こちらに質問として挙がっておりましたプルダウンメニューに連動するチェックボックスのdisable切り換えにつきまして。 http://okwave.jp/qa/q2928590.html 上記のアドレスの内容で設置した場合に、チェクを変更するときに最初にチェックしたものをリセットすることは可能でしょうか? 例えば 一度 食べも お米とりんごをチェック後に再度やり直したいとして、 二度目に 食べ物以外を選択した場合(生き物など)に上記のお米とリンゴのチェックをリセットして、全てのチェックを外したいのですがそんな便利なことが可能でしょうか? 可能でしたらどなたかご教授頂けると助かります。 何卒よろしくお願いいたします。

  • 遊園地・動物園・水族館で

    人気な順番は何だと思いますか? (1)遊園地 (2)動物園 (3)水族館

  • 遊園地について

    お盆休み中に空いている、都内の遊園地・動物園・水族館を教えてください。ディズニーランドなんかはやっぱり混んでるんでしょうね・・・

  • 博物館・美術館・水族館・動物園・遊園地 

    博物館・美術館・水族館・動物園・遊園地  1 どれが一番好きですか? 2 人と一緒に行くならどれがいいですか? 3 行きたくないところはありますか? 教えてください。

  • IEツールバーにプルダウンメニュー(ドロップダウンメニュー?)を追加したい

    宜しくお願いいたします。 インターネット エクスプローラでYahoo!ツールバーを使用しているのですが、「標準メニュー」ではなくって、Yahoo!ツールバーの各々の項目(?)の事でお尋ねしたいのですが、ずっと検索していたのですが、同等のQ&Aに辿り着けませんでしたので、ご教授願いたく、質問をさせていただきました。宜しくお願いいたします。 例えば、「標準メニュー」のお気に入りをクリックすると、登録済のものがプルダウンリスト(ドロップダウンリスト?)として出てきますよね。 それと同じように、Yahoo!ツールバーに新しい項目を追加したいのですが、Yahoo!ツールバーの機能で新規の項目を追加しようとすると、ただのリンク先が新ボタンとして追加されてしまいます。 以前、「Ask」とか、「スマイリー」(どちらも同じなのかな?)のツールバーを使用している方がいらっしゃったのですが、そのツールバーには何個かの新規プルダウンメニューが追加出来て、ちゃんと「標準メニュー」のお気に入りのように、クリックすると登録済のものがプルダウンリストとして出てきて、とても使い勝手がいいように感じていました。 現在は、「Askのツールバー」とかは既に存在していませんので、IEで使用出来るような他の方法はありませんでしょうか? 出来ましたら、Yahoo!ツールバーのままで、そんな機能が使えればいいな、と思っています。 説明が上手く出来ないのですが、補足質問をいただければと思います。 ノートPC…dynabook TX/430DS OS…windows XP Home Edition ブラウザ…インターネット エクスプローラ ツールバー…Yahoo!ツールバー どうかご教授願いたく、宜しくお願いいたします。 (主婦ですので、家事の時間帯等には補足&御礼が出来ない場合もございますので、その旨、ご理解いただけましたら幸いに存じます。)

  • 最短経路探索について

    下記のような問題をプログラムで解決する時、この問題を最短経路問題の「〇〇問題」に当てはめられるとしたらどれになるのでしょうか? プログラムが作りたいのですが、どのようにすればよいのか予想もつかないので、せめてカテゴリだけでも把握しておきたいと思い質問致します。 [問題] P子ちゃんは次の連休で動物園、遊園地、水族館、ハイキング、海水浴に行きたいという衝動に駆られました。 [条件1]しかし、全てを網羅する地域はないため、複数の地域へ行く必要があります。   (実際のことはよく知りません)例えば、大阪では動物園、遊園地、水族館のみ満たすことができ、静岡ではハイキング、海水浴のみ満たすことができ、埼玉では動物園、遊園地、ハイキングを満たすことが出来ます。 [条件2]各場所に行くには往復で1万円かかるとします。 [条件3]地域内での移動コストは考えないものとします。 [条件4]各場所によってそれぞれの観光地の入場料などは異なります。   例えば、大阪と埼玉の動物園の入園料は異なり、静岡と埼玉のハイキング入山料は異なります。   しかし、必ずしも異なるとは限らず、大阪と埼玉の遊園地の入園料が同じになる場合もあります。 [条件5]地域内の全ての観光地に行く必要はありません。 このとき、最も低コストに収まる地域と観光地の組み合わせを見つける場合についてお教えください。

専門家に質問してみよう