ベストアンサー

<SELECT>内<OPTION>の内容を曜日で変えるには？

2006/02/10 16:20

<FORM name="BGM"> <SELECT name="change"> <OPTION selected>選曲♪</OPTION> <OPTION value="○○○.mid">曲１</OPTION> <OPTION value="○○○.mid">曲２</OPTION> <OPTION value="○○○.mid ">曲３</OPTION> <OPTION value="○○○.mid ">曲４</OPTION> </SELECT> 　<INPUT onclick="bgm_change()" type="button"> </FORM> 今、このような形で、<SELECT>を使ってBGMを４曲から選べる機能を成功させています。この、<SELECT>の<OPTION>のプルダウンの内容を、曜日ごとで変えたいと思っています。今日の曜日を取得するJavascriptは、 Function WhatDayWeek() と言う名の関数で、　　　　Week = new Array(7); DATE = new Date(); thisweek = Week[DATE.getDay()]; 以上のように作っていますが、このJavascriptと、<SELECT><OPTION>をくっ付ける(反映させる)にはどう記述すればよいでしょうか？関数自体、この３行では足りないんでしょうか・・。どなたかご教授下さい。

neo-venus
お礼率66% (98/147)

HTML
回答数6
ありがとう数2

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

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

ベストアンサー

arenani_sorenani
ベストアンサー率73% (58/79)

2006/02/13 19:13 回答No.6

何かサービス残業させられてる気分なんですが、まあ、乗りかかった船ということで・・・・ <html> <head> <script language="Javascript"> sun=new Array(); sun[0]=["日曜日曲1","sun1.mid"] sun[1]=["日曜日曲2","sun2.mid"] sun[2]=["日曜日曲3","sun3.mid"] sun[3]=["日曜日曲4","sun4.mid"] mon=new Array(); mon[0]=["月曜日曲1","mon1.mid"] mon[1]=["月曜日曲2","mon2.mid"] mon[2]=["月曜日曲3","mon3.mid"] mon[3]=["月曜日曲4","mon4.mid"] tue=new Array(); tue[0]=["火曜日曲1","tue1.mid"] tue[1]=["火曜日曲2","tue2.mid"] tue[2]=["火曜日曲3","tue3.mid"] tue[3]=["火曜日曲4","tue4.mid"] wen=new Array(); wen[0]=["水曜日曲1","wen1.mid"] wen[1]=["水曜日曲2","wen2.mid"] wen[2]=["水曜日曲3","wen3.mid"] wen[3]=["水曜日曲4","wen4.mid"] thu=new Array(); thu[0]=["木曜日曲1","thu1.mid"] thu[1]=["木曜日曲2","thu2.mid"] thu[2]=["木曜日曲3","thu3.mid"] thu[3]=["木曜日曲4","thu4.mid"] fri=new Array(); fri[0]=["金曜日曲1","fri1.mid"] fri[1]=["金曜日曲2","fri2.mid"] fri[2]=["金曜日曲3","fri3.mid"] fri[3]=["金曜日曲4","fri4.mid"] sat=new Array(); sat[0]=["土曜日曲1","sat1.mid"] sat[1]=["土曜日曲2","sat2.mid"] sat[2]=["土曜日曲3","sat3.mid"] sat[3]=["土曜日曲4","sat4.mid"] function WhatDayWeek(){ DATE = new Date(); thisweek = DATE.getDay(); change_op(); } function change_op(){ for (i=sentaku.change.options.length;i>=1; i--) { sentaku.change.options[i] = null; } switch(thisweek){ case 0:for(i=0;i<sun.length; i++){sentaku.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break; case 1:for(i=0;i<mon.length; i++){sentaku.change.options[i+1]=new Option(mon[i][0],mon[i][1]);}break; case 2:for(i=0;i<tue.length; i++){sentaku.change.options[i+1]=new Option(tue[i][0],tue[i][1]);}break; case 3:for(i=0;i<wen.length; i++){sentaku.change.options[i+1]=new Option(wen[i][0],wen[i][1]);}break; case 4:for(i=0;i<thu.length; i++){sentaku.change.options[i+1]=new Option(thu[i][0],thu[i][1]);}break; case 5:for(i=0;i<fri.length; i++){sentaku.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break; case 6:for(i=0;i<sat.length; i++){sentaku.change.options[i+1]=new Option(sat[i][0],sat[i][1]);} } } function bgm_change(){ index=sentaku.change.selectedIndex; kyoku=sentaku.change.options[index].value; url = "http://*****/sound/bgm/"+kyoku; if(index){ wmp.innerHTML="<embed src='"+url+"' width='280' height='40' type='audio/midi' autostart=TRUE repeat=FALSE loop=FALSE panel=1>" } } window.onload=WhatDayWeek; </script> <noscript> JavaScriptをONにして下さい </noscript> </head> <body> <br> ♪BGMをどうぞ♪ <br> <div id="wmp"> <embed src="../sound/bgm/aaaaa.mid" width="280" height="40" type="audio/midi" autostart=TRUE repeat=FALSE loop=FALSE panel=1> </div> <br> <form name="sentaku"> <select name="change"> <option value="">--選曲♪--</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <input type="button" value="BGM変更" onclick="bgm_change()"> </form> </body> </html> .

質問者

お礼 2006/09/22 11:20

半年も経ってしまっての返信になりすみません、本当にありがとうございました。ばっちり動くようになりました。助かりました！

その他の回答 (5)

arenani_sorenani
ベストアンサー率73% (58/79)

2006/02/11 07:46 回答No.5

WinXPのIE6.0・NN7.1・FF1.5で確認してますが、動作は問題ない(Winでは)はずです。＞参考にして、コードを書きました。ご自分の書き間違えではないでしょうか・・私の貼ったソースをコピーしてメモ帳に貼り、拡張しを.htmlに変えてブラウザで開いてみてください。 .

質問者

お礼 2006/02/13 16:27

すみません、時間を置いてもう一度試してみましたら、成功しました！ただ時間を置いただけで、設定を何も変えずに試したらうまく行ったので、何が原因だったのか分からないのですが(^^; 非常に参考になるコードをありがとうございました！！

質問者

補足 2006/02/13 14:12

ありがとうございます。プルダウンの内容は出現するようになりました。しかし、「BGM変更」ボタンを押すと、プルダウンとボタンの上に表示されているプラグインが、なぜか画面から消えてしまいます。どう対処すればよいでしょうか・・？ (IE6.0,FF1.5.0.1) （下は、今のところ記述しているコードです。） <script language="Javascript"> sun=new Array(); sun[0]=["日曜日曲1","/sun1.mid"] sun[1]=["日曜日曲2","/sun2.mid"] sun[2]=["日曜日曲3","/sun3.mid"] sun[3]=["日曜日曲4","/sun4.mid"] mon=new Array(); mon[0]=["月曜日曲1","/mon1.mid"] mon[1]=["月曜日曲2","/mon2.mid"] mon[2]=["月曜日曲3","/mon3.mid"] mon[3]=["月曜日曲4","/mon4.mid"] tue=new Array(); tue[0]=["火曜日曲1","/tue1.mid"] tue[1]=["火曜日曲2","/tue2.mid"] tue[2]=["火曜日曲3","/tue3.mid"] tue[3]=["火曜日曲4","/tue4.mid"] wen=new Array(); wen[0]=["水曜日曲1","/wen1.mid"] wen[1]=["水曜日曲2","/wen2.mid"] wen[2]=["水曜日曲3","/wen3.mid"] wen[3]=["水曜日曲4","/wen4.mid"] thu=new Array(); thu[0]=["木曜日曲1","/thu1.mid"] thu[1]=["木曜日曲2","/thu2.mid"] thu[2]=["木曜日曲3","/thu3.mid"] thu[3]=["木曜日曲4","/thu4.mid"] fri=new Array(); fri[0]=["金曜日曲1","/fri1.mid"] fri[1]=["金曜日曲2","/fri2.mid"] fri[2]=["金曜日曲3","/fri3.mid"] fri[3]=["金曜日曲4","/fri4.mid"] sat=new Array(); sat[0]=["土曜日曲1","/sat1.mid"] sat[1]=["土曜日曲2","/sat2.mid"] sat[2]=["土曜日曲3","/sat3.mid"] sat[3]=["土曜日曲4","/sat4.mid"] function WhatDayWeek(){ DATE = new Date(); thisweek = DATE.getDay(); change_op(); } function change_op(){ obj=document.forms[0]; for (i=obj.change.options.length;i>=1; i--) { obj.change.options[i] = null; } switch(thisweek){ case 0:for(i=0;i<sun.length; i++){obj.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break; case 1:for(i=0;i<mon.length; i++){obj.change.options[i+1]=new Option(mon[i][0],mon[i][1]);}break; case 2:for(i=0;i<tue.length; i++){obj.change.options[i+1]=new Option(tue[i][0],tue[i][1]);}break; case 3:for(i=0;i<wen.length; i++){obj.change.options[i+1]=new Option(wen[i][0],wen[i][1]);}break; case 4:for(i=0;i<thu.length; i++){obj.change.options[i+1]=new Option(thu[i][0],thu[i][1]);}break; case 5:for(i=0;i<fri.length; i++){obj.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break; case 6:for(i=0;i<sat.length; i++){obj.change.options[i+1]=new Option(sat[i][0],sat[i][1]);} } } function bgm_change(){ var ob = document.getElementById("control") kyoku = document.sentaku.change.selectedIndex; sel = document.sentaku.change.options[kyoku].value; if(kyoku!=0) { ob.innerHTML = "<embed src="+sel+" WIDTH=150 HEIGHT=40 PANEL=1 ShowPositionControls=0 ShowControls=1 ShowAudioControls=1 AUTOSTART=FALSE REPEAT=FALSE LOOP=FALSE>"; }} window.onload=WhatDayWeek; </script> <noscript> JavaScriptをONにして下さい </noscript> ♪BGMをどうぞ♪ <DIV id=control> <EMBED src="http://～～～/20060121125315.mid" width=150 height=40 type=audio/midi AUTOSTART="FALSE" REPEAT=FALSE LOOP=FALSE PANEL="1"></DIV> <form name="sentaku"> <select name="change"> <option value="">--選曲♪--</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <input type="button" value="BGM変更" onclick="bgm_change()"> </form>

arenani_sorenani
ベストアンサー率73% (58/79)

2006/02/10 23:20 回答No.4

すみません。先ほどのは変数の一部がコピーしたまま書き換えてなかったので修正したものを貼り直します。 <script> sun=new Array(); sun[0]=["日曜日曲1","/sun1.mid"] sun[1]=["日曜日曲2","/sun2.mid"] sun[2]=["日曜日曲3","/sun3.mid"] sun[3]=["日曜日曲4","/sun4.mid"] mon=new Array(); mon[0]=["月曜日曲1","/mon1.mid"] mon[1]=["月曜日曲2","/mon2.mid"] mon[2]=["月曜日曲3","/mon3.mid"] mon[3]=["月曜日曲4","/mon4.mid"] tue=new Array(); tue[0]=["火曜日曲1","/tue1.mid"] tue[1]=["火曜日曲2","/tue2.mid"] tue[2]=["火曜日曲3","/tue3.mid"] tue[3]=["火曜日曲4","/tue4.mid"] wen=new Array(); wen[0]=["水曜日曲1","/wen1.mid"] wen[1]=["水曜日曲2","/wen2.mid"] wen[2]=["水曜日曲3","/wen3.mid"] wen[3]=["水曜日曲4","/wen4.mid"] thu=new Array(); thu[0]=["木曜日曲1","/thu1.mid"] thu[1]=["木曜日曲2","/thu2.mid"] thu[2]=["木曜日曲3","/thu3.mid"] thu[3]=["木曜日曲4","/thu4.mid"] fri=new Array(); fri[0]=["金曜日曲1","/fri1.mid"] fri[1]=["金曜日曲2","/fri2.mid"] fri[2]=["金曜日曲3","/fri3.mid"] fri[3]=["金曜日曲4","/fri4.mid"] sat=new Array(); sat[0]=["土曜日曲1","/sat1.mid"] sat[1]=["土曜日曲2","/sat2.mid"] sat[2]=["土曜日曲3","/sat3.mid"] sat[3]=["土曜日曲4","/sat4.mid"] function WhatDayWeek(){ DATE = new Date(); thisweek = DATE.getDay(); change_op(); } function change_op(){ obj=document.forms[0]; for (i=obj.change.options.length;i>=1; i--) { obj.change.options[i] = null; } switch(thisweek){ case 0:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break; case 1:for(i=0;i<mon.length;i++){obj.change.options[i+1]=new Option(mon[i][0],mon[i][1]);}break; case 2:for(i=0;i<tue.length;i++){obj.change.options[i+1]=new Option(tue[i][0],tue[i][1]);}break; case 3:for(i=0;i<wen.length;i++){obj.change.options[i+1]=new Option(wen[i][0],wen[i][1]);}break; case 4:for(i=0;i<thu.length;i++){obj.change.options[i+1]=new Option(thu[i][0],thu[i][1]);}break; case 5:for(i=0;i<fri.length;i++){obj.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break; case 6:for(i=0;i<sat.length;i++){obj.change.options[i+1]=new Option(sat[i][0],sat[i][1]);} } } function bgm_change(){} window.onload=WhatDayWeek; </script> <body> <form name="BGM"> <select name="change"> <option value="">--選曲♪--</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <input type="button" value="BGM変更" onclick="bgm_change()"> </form> </body> .

質問者

補足 2006/02/11 01:11

とても難しいのですね・・詳しく書いて頂きありがとうございます。参考にして、コードを書きました。が、スミマセン、恐縮なのですが、修正版を使用させていただきまして、ブラウザで確認したところ、プルダウンの内容が一つも出なくなってしまいました。 Frontpageに移し変えて、プレビューを見たところ、「thisweekが宣言されていません」という内容が出ます。これはどのように対処すればよいでしょうか？

arenani_sorenani
ベストアンサー率73% (58/79)

2006/02/10 22:49 回答No.3

javascriptの基本の部分がまだ良くお分かりではないようですね。お書きになっているスクリプトは文法や構文が間違ってます。サンプルを書きましたので参考にして下さい。 <script> sun=new Array(); sun[0]=["日曜日曲1","/sun1.mid"] sun[1]=["日曜日曲2","/sun2.mid"] sun[2]=["日曜日曲3","/sun3.mid"] sun[3]=["日曜日曲4","/sun4.mid"] mon=new Array(); mon[0]=["月曜日曲1","/mon1.mid"] mon[1]=["月曜日曲2","/mon2.mid"] mon[2]=["月曜日曲3","/mon3.mid"] mon[3]=["月曜日曲4","/mon4.mid"] tue=new Array(); tue[0]=["火曜日曲1","/tue1.mid"] tue[1]=["火曜日曲2","/tue2.mid"] tue[2]=["火曜日曲3","/tue3.mid"] tue[3]=["火曜日曲4","/tue4.mid"] wen=new Array(); wen[0]=["水曜日曲1","/wen1.mid"] wen[1]=["水曜日曲2","/wen2.mid"] wen[2]=["水曜日曲3","/wen3.mid"] wen[3]=["水曜日曲4","/wen4.mid"] thu=new Array(); thu[0]=["木曜日曲1","/thu1.mid"] thu[1]=["木曜日曲2","/thu2.mid"] thu[2]=["木曜日曲3","/thu3.mid"] thu[3]=["木曜日曲4","/thu4.mid"] fri=new Array(); fri[0]=["金曜日曲1","/fri1.mid"] fri[1]=["金曜日曲2","/fri2.mid"] fri[2]=["金曜日曲3","/fri3.mid"] fri[3]=["金曜日曲4","/fri4.mid"] sat=new Array(); sat[0]=["土曜日曲1","/sat1.mid"] sat[1]=["土曜日曲2","/sat2.mid"] sat[2]=["土曜日曲3","/sat3.mid"] sat[3]=["土曜日曲4","/sat4.mid"] function WhatDayWeek(){ DATE = new Date(); thisweek = DATE.getDay(); change_op(); } function change_op(){ obj=document.forms[0]; for (i=obj.change.options.length;i>=1; i--) { obj.change.options[i] = null; } switch(thisweek){ case 0:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],sun[i][1]);}break; case 1:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],mon[i][1]);}break; case 2:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],tue[i][1]);}break; case 3:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],wen[i][1]);}break; case 4:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],thu[i][1]);}break; case 5:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(fri[i][0],fri[i][1]);}break; case 6:for(i=0;i<sun.length;i++){obj.change.options[i+1]=new Option(sun[i][0],sat[i][1]);} } } function bgm_change(){} window.onload=WhatDayWeek; </script> <body> <form name="BGM"> <select name="change"> <option value="">--選曲♪--</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <input type="button" value="BGM変更" onclick="bgm_change()"> </form> </body> .

Chronos198
ベストアンサー率30% (105/349)

2006/02/10 16:40 回答No.2

そこまで来ていればあと一息です。 JavaScriptではif()やswitch()といった関数で、処理を分岐させる事が出来ます。例） if( thisweek == 0 ) { // 0の場合の処理 } else if( thisweek == 1 ) { // 1の場合の処理 } else { // 0でも1でもない場合の処理 } switch( thisweek ) { case 0: // 0の場合の処理 break; case 1: // 1の場合の処理 break; default: // 0でも1でもない場合の処理 break; } そして、OPTIONの中身を書き換える方法。 JavaScriptで change[xx].value で changeというSELECTのxx番目のOPTIONのvalue値を、 change[xx].text で changeというSELECTのxx番目のOPTIONのテキスト(<OPTION></OPTION>で挟んでいる文字列) を取得、変更する事が出来ます。これらを使って曜日ごとに処理を分岐し、OPTIONの値を変更させてみてください。ただし、ソースを覗かれてしまうと他の曜日の.mid名などがわかってしまいますので、それらを見られたくない場合はCGI等を使う必要があります。

質問者

補足 2006/02/10 20:03

ありがとうございます！今、アドバイスを参考に、Javascript部にこのように記述しています。 function WhatDayWeek() { var Week = new Array(7); var DATE = new Date(); var thisweek = Week[DATE.getDay()]; switch( thisweek ) { case 0: // 0の場合の処理 mychange[2].value = "http://～～～/○○○.mid"; mychange[2].text = "曲名１"; break; case 1: // 1の場合の処理 mychange[2].value = "http://～～～/○○○.mid"; mychange[2].text = "曲名２"; break; default: // 0でも1でもない場合の処理 break; } } このように日～土までの分を書いています。 <SELECT><OPTION>部はそのまま書いています。しかし、ブラウザで読み込んでみても、曲が全く変わりません。曲名も変わっていません。 varを外してみたり、case 0: というのをcase "日":とかcase[0]:と書いてみたり(笑)、いろいろ試してみますが、音沙汰ないと言った感じです。これからどう記述すればよいでしょうか？