• 締切済み

複数のセレクトボックスで項目を選択でき、それらの項目を条件に、ヒットするデータを表示させたいのですが…。

Webページにて校区表を作成しています。 作りたい仕組みは下記のとおりです。 １）１番目のセレクトメニューで町名を選択 a町 b町 c町… ２）２番目のセレクトメニューは、上記の町名に当てはまる番地を表示させる。例えば、a町が選択されたときは「1,2,3,4,5」、b町が選択されたときは「1,2,3」など。 ３）更に、「b町,e町,g町」が選択された場合にのみ３番目のセレクトメニューを表示させ、「号」を選択できるようにする。 ４）そして、「検索」ボタンが押された時に、上のセレクトメニューで選択された住所に該当する「学校名」を表示させる。 住所一覧と、その住所に該当する学校名を記入したテキストファイルを用意し、セレクトボックスで選択された項目にヒットする“学校名”を表示させるようにすれば…？と思うのですが、参考になるサイトを探しても「URLを表示させる」というものがほとんどで困っています。 なにぶん、プログラミングの初心者なので、参考になるサイトがありましたら教えていただきたいと思います。 よろしくお願い致します。

みんなの回答

  • nda23
  • ベストアンサー率54% (777/1415)
回答No.2

「1番目の選択項目で、2番目のリスト内容が変わる」 これはJavaScriptが使えることが大前提です。（Ajaxを使うにしてもJavaScriptが必要） 住所のような大量データを扱うとなると、クライアント側で何とかなるような話ではなさそうです。 初心者と言うことであれば、1画面×3セレクトではなく、3画面×1セレクトのように作ること考えてみては？

noragoro
質問者

補足

回答、ありがとうございます。 住所と言っても、小さな都市なので膨大なデータ量でもないと…。更に、初心者で無謀な挑戦かも知れないのですが、 一画面で結果を表示できるようにしたいのです。 たぶん、 a町　1　zz小学校 a町　2　zz小学校 a町　3　xx小学校 b町　1　yy小学校　…というようなテキストファイルを用意しておき、 1列目、2列目がともに選択されたら3列目の値を返すという処理かと思うのですが。 JavaScriptのみでは、このような処理は無理なのでしょうか？

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

formの値を取り出すところから開始しないとならなそうだね。 http://www.tohoho-web.com/js/form.htm http://www.tohoho-web.com/js/index.htm

noragoro
質問者

お礼

参考になるサイトを紹介していただき、ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • セレクトメニューの選択項目によって、もう１つのセレクトメニューの項目と項目数を変更する

    もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。 たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。

  • セレクトボックスで選択された統計をとるには

    セレクトボックスでジャンルを選択 　A・B・C・・・・ ※現在は、セレクトした時点でページジャンプするようになっています。 　　　↓ そのジャンルに該当する商品一覧が表示される www.xxx.com/list.php?genre=B のようになっています。 どのジャンルが人気なのか統計を取りたいと思っています。 google Analyticsでは、ページビュー数が分かるのは把握しています。 これだと、Bジャンルが複数ページあると、厳密には統計はとれない。 現在はNINJAを利用しています。 これだと、www.xxx.com/list.phpの統計になり、意味がない。 セレクトボックスで選択された時点、ページが表示された時点、の どちらかで統計をとることが考えられます。 簡単にできる方法、もしくは自作で作成する考え方を教えて欲しいのですが。 宜しくお願い致します。

    • ベストアンサー
    • PHP
  • セレクトボックスのN番目を選択したい

    <select id="foo"> <option value="a">a</option> <option value="b">b</option> ... </select> ここで例えばjQueryを使って"b"を選択させるには $("#foo").val('b'); ですが、「上からN番目を選択させる」「一番下を選択させる」等位置で指定したいときはどうすれば良いですか？

  • セレクトボックスの選択状態について

    セレクトボックスの横にチェックボックスがあり、 チェックボックスON→セレクトボックスはAの内容 チェックボックスOFF→セレクトボックスはBの内容 となるものがあります。 問題は、これに値を保持する機能を付けたいのです。 例えば、チェックボックスにチェックがある状態でセレクトボックスの３番目の要素を選択していたとします。そこで、チェックをはずし一度Ｂの内容を表示させてから、再度チェックを付けＡの内容に戻した時に３番目の要素が選択されている状態にしたいです。逆の場合も同様にしたいです。アドバイスを頂けたらと思います。宜しくお願い致します。 <script type="text/javascript"> <!-- a = 0; b = 0; txt = {}; txt["A"] = new Array("設定なし","A1","A2"); txt["B"] = new Array("設定なし","B1","B2","B3"); function set(select_box,check_box){ if (document.forms[0].elements[check_box].checked) { key = "A"; b = document.forms[0].elements[select_box].options.selectedIndex; } else { key = "B"; a = document.forms[0].elements[select_box].options.selectedIndex; } while (document.forms[0].elements[select_box].options[0]){ document.forms[0].elements[select_box].options[0] = null; // セレクトボックスのメニューを消去 } for (i=0; i<txt[key].length; i++){ document.forms[0].elements[select_box].options[i] = new Option(txt[key][i],txt[key][i]); // セレクトボックスのメニューの項目を生成・表示テキストとvalue値を設定 } if (key = "A") { document.forms[0].elements[select_box].options.selectedIndex = a; } else if (key = "B") { document.forms[0].elements[select_box].options.selectedIndex = b; } } // --> </script>

  • セレクトメニューの選択項目変更で入力した値を変更する。

    例 第一選択のセレクトメニューで項目Aを選択。 第二選択で項目Aの数値を取得。 第一選択のセレクトメニューで項目Bを選択。 第二選択で項目Bの数値を取得。 (第二選択はセレクトかテキスト入力の予定です) 取得した値をAもしくはBに代入。 計算式(A*2)+(2/B) もしくは 計算式a　(a*2)+10 計算式b　(b*2)+10 と言う風に選択項目によって代入位置を変更したいです。 計算式も代入する値も多くあるのでセレクトメニューで選択して その位置を変更したいのですが、どのようにしたらいいのでしょうか? 他に良い方法とかあるものなんでしょうか?? 初心者でサンプル例文を切り張り修正でしか作れません。(-_-;) 専門用語とか詳しく説明されても解らないと思うので、 例文だけでも書いていただいたらありがたいです。 あとはなんとか例文を参考に自分で調べて構文の仕組みを理解するのでお願いします。<(_ _)>

  • Excel条件にあうデータを表示したい

    Excelシートに ---------------------------------------- 　　　A　 　　B　　　　　C　　 　D １　 日付　　社名　　担当者　 品名 ２ 06/07/01 ○ 　　　 △　　　 × ３ 06/07/02　** 　　　 △　　　 ◇ ４ 06/07/01 □　　　 ▲　　　 ◎ ---------------------------------------- というようなデータがたくさん入力されています。 １行目のタイトルのとこがドロップダウンになっており、その列に入力されているすべてのデータを表示して、ある単語を選択するとその該当するデータのみを表示したいのですが、どのようにしたらよいのでしょうか。 上の表で、 たとえば、C1の担当者のところのドロップダウンメニューで「△」を選択すると、２行目の３行目のデータのみを表示します。 そして、C1の担当者のところのドロップダウンメニューで「すべて」を選択すると、上表の状態に（２行目から４行目のデータを表示）戻したいのです。 参考になるサイトなどもご存知でしたら教えて下さい。

  • iPhoneでセレクトボックスが選択できない

    スマートフォンにも表示対応している、フォームを作成しています。 セレクトボックスがあり、希望の値を選択するような項目があります。 <select name="sentaku"> <option value="A" selected>A</option> <option value="B">B</option> </select> ブラウザでも（ＩＥ9、crome）、iPhone5でも表示はされますが、 iPhone5で表示した場合、選択項目はグリグリって項目を選べる感じにはなるのですが、 項目をタップしても、決定されず、右上の完了を押さないと選択が決定されません。 ネットで検索し、メタタグ"viewport"をwidth=device-widthにしたり、width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no で試していますが、選択項目に関しては、項目名タップで決定できない状態です。 ページのURLを記載できないので、上記イメージだけで申し訳ありませんが、どなたかお解りになる方、宜しくお願い致します。

  • セレクトメニュー項目によって、表示内容を変えたい。

    セレクトメニューの内容によって、チェックボックスの表示をさせたいのですが、 Javascriptを使って設定できるか教えて下さい。 例えば、セレクトメニューリストが、「選択して下さい」「犬」「ネコ」「鳥」「トラ」とあって、 「犬」を選んだ時に、「オスのみ」「メスのみ」のチェックボックスを表示させるにはどうすればいいでしょうか？ (それ以外のリストを選んだ場合は表示させなくしたいのです。) 宜しくお願いします。

  • 3連セレクトボックスで選択肢を変更し条件を絞り込む

    現在、JavaScriptの勉強中です。 三つの連動したセレクトボックスを利用して選択肢を絞り込もうと考えています。 例えば最初のセレクトボックスで「都道府県」を選択させ、選んだ段階で、二番目のセレクトボックスに選んだ都道府県の中にある「市町村」を表示させる、 次に二番目の「市町村」の一つを選んだ段階で、三番目のセレクトボックスに選んだ「市町村」内の支店名を表示させ選択させる。というものです。 以下のようなソースがあるのですが、この内容だと、最初の選択肢の数が10個を超えた段階で次の選択肢が作動しなくなる事が、 動作上で確認されました。 一つのセレクトボックスの選択肢の数を100個程度、或いは、理論上無制限にするには、どの様にしたらよいかを考えています。 できれば、現在のソースのロジックの解説も併せて、ご教授頂ければ幸いです。 以下JavaScript内容--------------- var data = new Array("都道府県は？","東京都","神奈川","千葉"); var data0 = new Array("---"); var data1 = new Array("区は？","千代田区","中央区","品川区");　　　 var data2 = new Array("市町村は？","横浜市","川崎市");　　　　 var data3 = new Array("市町村？","千葉市","市原市");　　　　 var data10 = new Array("---"); var data11 = new Array("支店名は？","千代田1号店","千代田2号店","千代田3号店"); var data12 = new Array("支店名は？","中央区1号店","中央区2号店","中央区3号店","中央区4号店","中央区5号店"); var data13 = new Array("支店名は？","品川1号店","品川2号店"); var data20 = new Array("---"); var data21 = new Array("支店名は？","横浜1号店","横浜2号店","横浜3号店","横浜4号店"); var data22 = new Array("支店名は？","川崎1号店","川崎2号店","川崎3号店"); var data30 = new Array("---"); var data31 = new Array("支店名は？","千葉1号店","千葉2号店"); var data32 = new Array("支店名は？","市原1号店"); function SetList(objid, arr){ var obj = document.getElementById(objid); for(i=obj.length; i>=0; i--){ obj.options[i] = null; } for(i=0; i<arr.length; i++){ obj.options[i] = new Option(arr[i]); obj.options[i].value = arr[i];}} 以下、HTML内容--------------- <body onLoad="SetList('sel0', data);" style="margin:0px;"> <div> <form> <select id="sel0" name="sel0" style="width:160px;" onChange="SetList('sel2',data0);SetList('sel1', eval('data' + this.selectedIndex))"> <option>---</option> </select> <select id="sel1" name="sel1" style="width:160px;" onChange="SetList('sel2', eval('data' + document.forms[0].sel0.selectedIndex + this.selectedIndex))"> <option>---</option> </select> <select id="sel2" name="sel2" style="width:160px;"> <option>---</option> </select> </form> </div> </body>

  • セレクトメニューと複数のテキストボックス連携

    お世話になります。セレクトメニュー１個と複数（２個）の テキストボックスに連携についてお尋ねします。 セレクトメニュー１個の選択肢が「aaa」「bbb」「ccc」とあり、 「aaa」を選んだら、その value がテキストボックス１に「111」が入り、それと同時にテキストボックス２に「アルファベットの１番目」と入り、 「bbb」を選んだら、その value がテキストボックス１に「222」が入り、それと同時にテキストボックス２に「アルファベットの２番目」と入り、 「ccc」を選んだら、その value がテキストボックス１に「333」が入り、それと同時にテキストボックス２に「アルファベットの3番目」と入る、 ようにしたいのですが、どのような記述にしたらよろしいのでしょうか？ よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する