ベストアンサー

セレクトボックス連動

2007/12/11 11:07

過去の質問にありましたソースを参考にセレクトボックスの連動タイプをphpを絡めて作っています。 DBから取出した　menua　に入る値を初期値に設定したいのですがうまくいきません。 menua　には　AAA、BBB、CCCが入ります。初期値を変えるにはどのようにすればいいのでしょうか。また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>

cefirosp
お礼率73% (14/19)

JavaScript
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2007/12/11 15:07 回答No.4

window.onloadのところを以下のようにします。サブメニューをセットしたあとにチェックすればよいでしょう。 window.onload=function (){ var f=document.getElementById('FORM1'); var menua=f.menua; var menub=f.menub; for(var i=0; i<data.length; i++){ var ele=document.createElement("option"); ele.setAttribute("value",i); ele.appendChild(document.createTextNode(data[i][0])) menua.insertBefore(ele,menua.options[menua.options.length]); } var num=setDefaultValue(); setSubMenu(num); for(var i=0;i<menub.length;i++) if(menub[i].text=='<?=$menub?>') menub[i].selected=true; };

質問者

お礼 2007/12/11 16:53

window.onload ～だったのですね、ありがとうございました。無事出来ました。勉強になりました。

その他の回答 (4)

redfox63
ベストアンサー率71% (1325/1856)

2007/12/11 16:22 回答No.5

> うまくいかないですこのうまくいかないの部分を説明しましょう自分はこのようにコーディングしたしかし希望する結果と実行結果が食い違う本来はこのようにしたいが実際にはこうなってしまうといったように質問・補足に書き込みしましょうたとえば・・・ menuAにはDBから3種類のデータの中から2番目のデータを初期値として使いたい options[2].selected = true; と書いたが 3番目が選択されてしまった

質問者

お礼 2007/12/11 16:55

おっしゃるとおりです、次回質問をする時は触った部分も書いていきます。ありがとうございました。

yambejp
ベストアンサー率51% (3827/7415)

2007/12/11 13:58 回答No.3

あ、デフォ値についての質問でしたね。じゃ、こんな感じで <?PHP $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; window.onload=function (){ var f=document.getElementById('FORM1'); var menua=f.menua; for(var i=0; i<data.length; i++){ var ele=document.createElement("option"); ele.setAttribute("value",i); ele.appendChild(document.createTextNode(data[i][0])) menua.insertBefore(ele,menua.options[menua.options.length]); } var num=setDefaultValue(); setSubMenu(num); }; function setSubMenu(no){ var f=document.getElementById('FORM1'); var menub=f.menub; var len=menub.length; for(var i=0;i<len;i++) menub.removeChild(menub.options[0]); for(var i=1; i<data[no].length; i++){ var ele=document.createElement("option"); ele.setAttribute("value",data[no][i].value); ele.appendChild(document.createTextNode(data[no][i].key)) menub.insertBefore(ele,menub.options[menub.options.length]); } } function setDefaultValue(){ var f=document.getElementById('FORM1'); var menua=f.menua; for(var i=0;i<menua.length;i++){ if(menua[i].text=='<?=$menua?>'){ menua[i].selected=true; return i; } } } </script> </head> <body> <form id="FORM1"> <select name="menua" onchange="setSubMenu(this.value)"> </select> <select name="menub" > </select> </form> </body> </html>

質問者

お礼 2007/12/11 14:35

ご回答ありがとうございます。ソースを元に作ってみたところうまくDBから渡せました。ありがとうございました。 menub　にも初期値を渡そうとするのですがうまくいきません。 function setDefaultValue(){　～の中に書けばいけそうな気がしますが、出来ないです。

yambejp
ベストアンサー率51% (3827/7415)

2007/12/11 12:04 回答No.2

formにnameをつけるのは非推奨です。いかざっと書いてみました。 <html> <head> <script type="text/javascript"> data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; window.onload=function (){ var f=document.getElementById('FORM1'); var menua=f.menua; for(var i=0; i<data.length; i++){ var ele=document.createElement("option"); ele.setAttribute("value",i); ele.appendChild(document.createTextNode(data[i][0])) menua.insertBefore(ele,menua.options[menua.options.length]); } setSubMenu(0); }; function setSubMenu(no){ var f=document.getElementById('FORM1'); var menub=f.menub; var len=menub.length; for(var i=0;i<len;i++) menub.removeChild(menub.options[0]); for(var i=1; i<data[no].length; i++){ var ele=document.createElement("option"); ele.setAttribute("value",data[no][i].value); ele.appendChild(document.createTextNode(data[no][i].key)) menub.insertBefore(ele,menub.options[menub.options.length]); } } </script> </head> <body> <form id="FORM1"> <select name="menua" onchange="setSubMenu(this.value)"> </select> <select name="menub" > </select> </form> </body> </html>

redfox63
ベストアンサー率71% (1325/1856)

2007/12/11 11:40 回答No.1

セレクトの子要素optionのselected属性をtrueに設定すれば良いように思いますたとえば setSubMenuのfor文を抜けたあとに document.FORM1.menub.options[no].selected = true; といった具合です

質問者

お礼 2007/12/11 14:33

ご回答ありがとうございます。おっしゃる意味は解るんですが、うまくいかないです。 phpとまったく違いますね。

関連するQ&A

連動セレクトボックスを同一ページにもう一つ追加したい
今回質問させていただきたいのは同一ページ内に連動するセレクトリストを二つ付けたいのですが上手く起動してくれません。説明下手ですみません・・　例えばですけど htmlには、 <html> <head> <title>あ</title> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:"02_11"}, {key:"小樽市",value:"02_12"}, {key:"その他市町村",value:"02_099"}], ["青森", {key:"青森市",value:"03_01"}, {key:"弘前市",value:"03_02"}, {key:"その他市町村",value:"03_099"}], ["岩手県", {key:"盛岡市 ",value:"04_01"}, {key:"宮古市",value:"04_02"}, {key:"その他市町村",value:"04_099"}], ["宮城県", {key:"石巻市",value:"05_06"}, {key:"塩竈市",value:"05_07"}, {key:"その他市町村",value:"05_099"}] ]; この他にもう一つ別窓で <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM2"> <select name="MENUC" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUD" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["プログラミング", {key:"HTML",value:"11_01"}, {key:"JavaScript",value:"11_02"}, {key:"その他市",value:"11_099"}], ["データベース", {key:"Oracle",value:"12_01"}, {key:"MySQL",value:"12_02"}, {key:"その他市",value:"12_099"}] ]; と書いたセレクトリストをもう一つ追加したいのです。が何度やっても上手くいきません。
- ベストアンサー
- JavaScript
ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 htmlには、 <html> <head> <title>あ</title> <script type="text/javascript">  </script> <script type="text/javascript">  </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:02_11}, {key:"小樽市",value:02_12}, {key:"旭川市",value:02_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・すみませんがご教授のほどよろしくお願いいたします。
- ベストアンサー
- JavaScript
２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript">  </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>
- ベストアンサー
- JavaScript
セレクトメニューの4連動
いつも参考にさせて頂いております。 javascript初心者です。現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。一つ目のセレクトで、地域の選択二つ目のセレクトで、県の選択三つ目のセレクトで、「プレイスポット」か「食事」の選択四つ目のセレクトでは、プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript">  </script> </head> <body> <form name="form1"> <select name="sel1" onChange="setA(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">関西</option> </select> <select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_c" onChange=""><option value="0" selected>---------------</option></select> </form> </body> </html>
- 締切済み
- JavaScript
セレクトメニュー連動のテキストをクリアにしたい
下記のサンプルがあります。 <html> <head> <title>form TEST</title> <script>  </script> </head> <body onLoad="check()"> <form name= "form"> Value１ <select name="one" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value２ <select name="two" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value３ <select name="three" style="visibility:hidden" onchange="txtchg()"> </select> Value４ <textarea name="four" rows="1" cols="10"></textarea> </form> </body> </html> これは、Value1の選択値によってValue3の選択肢を変えて、Value2とValue3の選択値の組み合わせの結果をValue4に記入するという動作のサンプルです。でもこれですと、Value2とValue3の結果でValue４に記入された後に、Value1やValue2を変更した場合、Value3は初期値に戻るのですが、Value4はそのまま表示されたままになってしまいます。本当はValue3が初期値に戻ったのだから、その場合はValue4をクリアにしたいのですが。どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。
- ベストアンサー
- JavaScript
複数のセレクトメニューを制御するとき・・・
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。ネットで探した方法で、セレクトメニュー１の項目を選択したときにセレクトメニュー２の項目を変化させる制御をしています。このフォームでDBにvalue値（1,2など数値で）を送信するようにしたいのですがこの方法ですとセレクトメニュー２のvalue値が0（NULL）となってしまい上手く送信できません。配列に文字列を入れていますし、DBの型をintにしているので0になってしまっていると思うのですが、文字列としては送信したくはありません。どのような方法でしたら文字列ではなく、上手くvalueに数値を入れることが出来るでしょうか。どうかよろしくおねがいします。以下使用しているコードです。 <html> <head> <title>テストテスト</title> <script language="JavaScript"></script> </head> <body> <form name="aaa"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb"> <option value="" selected>--- 選択してください ---</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
セレクトボックスの連動
セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0～複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜
- ベストアンサー
- JavaScript
セクトボックスの連携の仕方。
こんにちは。過去の質問とか見たのですが、どうしても解決ができなかったので、質問させて下さい。 JavaScriptの部分に <script type="text/javascript">  </script> <script type="text/javascript" >  </script> と記述し、フォームに <form name="form1" method="post" action="tenpo2.php"> <select name="eria" id="eria" onChange="setSubMenu3(this.selectedIndex)"> </select> <select name="tiku" id="tiku"> </select> </form> と書いています。サーバーにアップして動かしてみてるのですが、セレクトボックスに何も表示されません・・・もう何がなんだかって感じなんですが、どうか助けてください。よろしくお願いします。
- ベストアンサー
- JavaScript
リストボックスを連動させて・・・その２
直前の質問で下記の回答をいただいたものです。質問では２つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript>  </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>
- ベストアンサー
- JavaScript
selectのnameが配列の場合
説明がわかりにくいかもしれませんがよろしくお願いいたします。　セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。 nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり１つだけの場合は成功しました。しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。 PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか？現在以下のようにソースを書いて失敗しています。ご教授の程よろしくお願いいたします。 ↓↓JavaScript部分 <script> function selectChange(){ var no = document.test1.elements['member[]'].selectedIndex; if(no==1){ document.test1.elements['point[]'].value =0; } else{ document.test1.elements['point[]'].value =""; } } </script> ↓↓HTML部分 <form name='test1'> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> <br> <select name='member[]' onChange='selectChange()'> <option value='aaa'>aaa</option> <option value='bbb'>bbb</option> <option value='ccc'>ccc</option> </select> <input name='point[]' type='text'> </form> //bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい
- ベストアンサー
- JavaScript

セレクトボックス連動