セレクトメニューの選択によって次に表示されるDivを変更したい

このQ&Aのポイント
  • セレクトメニューの選択によって次に表示されるDivを変更する方法について詳しく教えてください。2週間ほど前からJSとPHPを勉強している初心者ですが、うまくいきません。
  • セレクトメニューで県を選択すると、その県に関連する区市町村を表示するセレクトメニューを作成したいです。また、選択した項目をデーターベースに保存したいです。
  • データーベースの制約により、ID属性の設定ができないため、NAME属性を使用してセレクトメニューを作成しています。ただし、47都道府県全てに対応させる方法が分かりません。ご教授いただけると幸いです。
回答を見る
  • ベストアンサー

セレクトメニューの選択によって次に表示されるDivを変更したい

ここ2週間くらいずっと経験ないJSとPHPをいじってなんとか形になって来ましたが、どうしてもうまくいきません。 ものすごい初心者なので詳しく教えて頂けるとうれしいです。 【やりたい事】 (1)[県]と選択するとその県の(2)[区市町村]を選択できるセレクトメニューを表示させたい。 (1)と(2)で選んだ項目をデーターベースに保存したい。 【条件】 データーベースを購入して使用しているためID属性設定が出来ず、NAME属性設定しかできません。 【htmlソース】 <form name="sys_form"> 県を呼び出す特殊なコマンドコメント(Value=FP01~北海道)(onchange="showthis(this)"使用) <div id="FP01">北海道の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> <div id="FP02">青森県の市町村のセレクトメニューを作り出す特殊なコマンドコメント</div> ~FP47まで続く。 </form> 【JS】 function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "FP01"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "FP01"){ if(document.getElementById){ document.getElementById("FP01").style.display = "none"; } } } 上の状態で北海道は出来たのですが、47都道府県をうまく動作される方法がわかりません。 よろしければ教えて下さい。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

これでどうです。 function showthis(sel) { var elements = document.getElementsByTagName("div"); for(var i=0;i<elements.length;i++){ if (elements[i].id.indexOf("FP")==0){ elements[i].style.display = "none"; } } var value = sel.options[sel.selectedIndex].value; if (value.indexOf("FP")==0){ document.getElementById(value).style.display = "block"; } }

cherry0910
質問者

お礼

実験用のデーターを作るのにちょっと時間かかってしまい、お礼が遅れてしまい申し訳有りません。 やりたいことが無事出来ました! 助かりました。 ありがとうございました。

関連するQ&A

  • プルダウンメニューでページ内の表示を変える の派生質問

    某サイトで紹介いただいているソースの引用で恐縮ですが、 下記のソースで、div1~3のソース部分はうまく切り替わるのですが、ページが開いてすぐの時点では、まったく表示されず、セレクト項目を選んだ後に切り替えが動作します。 ページを開いたら、デフォルトで <div id="item1"> <p> あいうえお </p> </div> が表示されるようにするには、どうすれば宜しいでしょうか? ご教授くださいませ ------------------------ <html> <head> <script type="text/javascript" language="JavaScript"> function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option value="item1">ディブ1</option> <option value="item2">ディブ2</option> <option value="item3">ディブ3</option> </select> </form> <div id="item1"> <p> あいうえお </p> </div> <div id="item2"> <p> かきくけこ </p> </div> <div id="item3"> <p> さしすせそ </p> </div> </body> </html>

  • ラジオボタン→セレクトボックスで表示切替がしたい

    次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。 参考にしたサイトはこちらです。 https://www.torat.jp/css-radiobotton/ 以下はそのソースです。 <form> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked> <label class="form-check-label"> 好きな食べ物</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()"> <label class="form-check-label"> 好きな場所</label> </div> </form> <ul> <div id="foodList"> <li>お寿司</li> <li>アイスクリーム</li> <li>チーズケーキ</li> <li>お団子</li> </div> <div id="placeList"> <li>自由が丘</li> <li>下北沢</li> <li>吉祥寺</li> <li>高円寺</li> </div> </ul> <script> function formSwitch() { hoge = document.getElementsByName('maker') if (hoge[0].checked) { // 好きな食べ物が選択されたら下記を実行します document.getElementById('foodList').style.display = ""; document.getElementById('placeList').style.display = "none"; } else if (hoge[1].checked) { // 好きな場所が選択されたら下記を実行します document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = ""; } else { document.getElementById('foodList').style.display = "none"; document.getElementById('placeList').style.display = "none"; } } window.addEventListener('load', formSwitch()); </script>

  • style.displayだと効率悪いから…

    style.displayだと効率悪いから違うやり方をしたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById(&#039;Box1&#039;).style.display = "";と、 document.getElementById(&#039;Box1&#039;).style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById(&#039;sample&#039;)){ id = document.getElementById(&#039;sample&#039;).value; if(id == &#039;select1&#039;){ document.getElementById(&#039;Box1&#039;).style.display = ""; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = "none"; }else if(id == &#039;select2&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = ""; document.getElementById(&#039;Box3&#039;).style.display = "none"; } else if(id == &#039;select3&#039;){ document.getElementById(&#039;Box1&#039;).style.display = "none"; document.getElementById(&#039;Box2&#039;).style.display = "none"; document.getElementById(&#039;Box3&#039;).style.display = ""; } } window.onload = viewChange; } </script> javascript全文を書いていただければ幸いです。

  • style.displayだと効率悪いから...

    style.displayだと効率悪いからfor文を使いたいです。 以下はhtmlです。 なぜ効率悪いかというと、 一つ一つ、 セレクトごとに、 document.getElementById('Box1').style.display = "";と、 document.getElementById('Box1').style.display = "none"; を書かなければならないからです。 構文が長くなってしまい、非効率です。 しかし、document.getElementById自体1つしか書けないのです。 for文を使う必要があるのです。 ご教授願えたら幸いです。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5"> <p>two</p> </div> <div id="Box3" class="my-5"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • Javascriptで質問です2

    セレクトボックスから選択してテキストや画像を出力する以下のコードがあるのですが、これをセレクトボックスを2段階で選択後にテキストや画像を出力したいのです。 詳しい方がいらっしゃれば、ご教示いただければ幸いです。よろしくお願いいたします。 <div class="col-auto my-1"> <label for="sample">選択してください</label> </div> <div class="col-auto my-1"> <select class="form-control" id="sample" onchange="viewChange();"> <option value="select1">one</option> <option value="select2">two</option> <option value="select3">three</option> </select> </div> <div class="col-auto my-5"> <div id="Box1" class="my-5"> <p>one</p> </div> <div id="Box2" class="my-5" style="display:none;"> <p>two</p> </div> <div id="Box3" class="my-5" style="display:none;"> <p>three</p> </div> </div> <script> function viewChange(){ if(document.getElementById('sample')){ id = document.getElementById('sample').value; if(id == 'select1'){ document.getElementById('Box1').style.display = ""; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = "none"; }else if(id == 'select2'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = ""; document.getElementById('Box3').style.display = "none"; } else if(id == 'select3'){ document.getElementById('Box1').style.display = "none"; document.getElementById('Box2').style.display = "none"; document.getElementById('Box3').style.display = ""; } } window.onload = viewChange; } </script>

  • セレクトメニューに応じたdivタグの内容

    javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>

  • JavaScriptでの表の行の表示・非表示の切り替え

    現状では、テスト1を選んだときだけテキストを出すことはできるのですが、どうしても2行表示するという事ができません。 テスト1を選択した時だけ2行表示し、テスト1以外を選択した時は非表示にするにはどうすればよいのでしょうか。 <html> <head> <title>テスト</title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(sel) { var value = sel.options[sel.selectedIndex].value; if(value == "test1"){ if(document.getElementById){ if(document.getElementById(value).style.display == "block"){ document.getElementById(value).style.display = "none"; }else{ document.getElementById(value).style.display = "block"; } } } else if(value != "test1"){ if(document.getElementById){ document.getElementById("test1").style.display = "none"; } } } // --> </script> </head> <body> <table border="1" width="367"> <tr> <td width="134"> <form> <select onchange="showthis(this)"> <option selected="selected">選んでください</option> <option value="test1">テスト1</option> <option value="test2">テスト2</option> <option value="test3">テスト3</option> </select> </form> </td> <td width="217"> <p>テスト</p> </td> </tr> <tr> <td width="134"> <p>&nbsp;</p> </td> <td width="217"> <p>&nbsp;</p> </td> </tr> </table> <div id="test1" style="display:none;"> (本来はここに2行追加したい) </div> </body> </html>

  • 2個選択することで初めて表示というのができない

    <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (value == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // function selectboxChange11() { var value = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (value == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <div>プルダウンのメニュー1</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> <div>プルダウンのメニュー2</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> ↑はjsの分ですが、 2個選んだら初めてイベントが発生するプログラムを作成しているのですが、 いかんせんうまくいきません。 恐らく、var value = document.forms.form1.Select1.value;のところで、躓いているのだと思います。 document.formsにカンマをつけてみたり、さらに、両端に[]をつけてみたり、いろいろ試しましたが、うまくいきません。 それとも、重ねること自体ができないのでしょうか。 どうしたらいいのでしょうか。

  • セレクトメニューでレイヤーの切り替え

    <html>  <head>   <title>実験用</title>  </head> <script language="javascript"> <!-- function sel(flg){  flg.style.display = "block"; } //--> </script>  <body>   <select onChange="sel(this.value)">    <option value="aaa">その1    <option value="bbb">その2   </select>   <div id="aaa" style="display:none;background:skyblue">ああああああああああああああ</div>   <div id="bbb" style="display:none;background:skyblue">いいいいいいいいいいいいいい</div>  </body> </html> このスクリプトは動かないのですが、イメージとしては セレクトメニューで選んだら、それに対応したレイヤーを 表示させたり、非表示にしたりしたいのです。 環境はWinXP,IE6とMac9.2.2,IE5.1です。 何かいい方法は無いでしょうか。

  • セレクトボックスについて

    <script type="text/javascript"> function entryChange(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == '0'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '1'){ document.getElementById('selectbox1').style.display = ""; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '2'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = ""; document.getElementById('selectbox3').style.display = "none"; } if(id == '3'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = ""; } } } window.onload = entryChange; </script> ↑こちらは表示/非表示の処理をしています。 <select id="changeSelect" name="number" onchange="entryChange();"> <option value="0">未選択</option> <option value="1">リスト1</option> <option value="2">リスト2</option> <option value="3">リスト3</option> </select> <select name="number" id="selectbox1" style="display:none"> <option value="東京都">東京都</option> <option value="京都府">京都府</option> </select> <select name="number" id="selectbox2" style="display:none"> <option value="北海道">北海道</option> <option value="沖縄県">沖縄県</option> </select> <select name="number" id="selectbox3" STYLE="display:none"> <option value="兵庫県">兵庫県</option> <option value="大阪府">大阪府</option> </select> <input type="submit" value="送信"> (1)「未選択」のまま送信すると「大阪府」が送信されます。 (2)「リスト1」→「沖縄県」を選択 「大阪府」が送信されます。(リスト2も同じ事になります。) (3)「リスト3」→「兵庫県」を選択 「兵庫県」と送信されます。 リスト3以外を選択するとなぜか「大阪府」が送信されます。 初心者なりに色々調べたのですが解決できず困っております。 よろしくお願いします。

専門家に質問してみよう