- ベストアンサー
セレクトボックス連動
過去の質問にありましたソースを参考にセレクトボックスの 連動タイプを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"> <!-- 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}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </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）
- 専門家の回答
質問者が選んだベストアンサー
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; };
その他の回答 (4)
- redfox63
- ベストアンサー率71% (1325/1856)
> うまくいかないです このうまくいかないの部分を説明しましょう 自分はこのようにコーディングした しかし 希望する結果と実行結果が食い違う 本来は このようにしたいが 実際にはこうなってしまう といったように質問・補足に書き込みしましょう たとえば ・・・ menuAにはDBから3種類のデータの中から2番目のデータを初期値として使いたい options[2].selected = true; と書いたが 3番目が選択されてしまった
お礼
おっしゃるとおりです、次回質問をする時は触った部分も書いていきます。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
あ、デフォ値についての質問でしたね。 じゃ、こんな感じで <?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>
お礼
ご回答ありがとうございます。 ソースを元に作ってみたところうまくDBから渡せました。 ありがとうございました。 menub にも初期値を渡そうとするのですがうまくいきません。 function setDefaultValue(){ ～ の中に書けばいけそうな気がしますが、出来ないです。
- yambejp
- ベストアンサー率51% (3827/7415)
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)
セレクトの子要素optionのselected属性をtrueに設定すれば良いように思います たとえば setSubMenuのfor文を抜けたあとに document.FORM1.menub.options[no].selected = true; といった具合です
お礼
ご回答ありがとうございます。 おっしゃる意味は解るんですが、うまくいかないです。 phpとまったく違いますね。
お礼
window.onload ～ だったのですね、ありがとうございました。 無事出来ました。 勉強になりました。