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

解決済

質問者：neo-venus
質問日時：2006/02/10 16:20
回答数：6件

<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>をくっ付ける(反映させる)にはどう記述すればよいでしょうか？
関数自体、この３行では足りないんでしょうか・・。
どなたかご教授下さい。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： arenani_sorenani
回答日時：2006/02/13 19:13

何かサービス残業させられてる気分なんですが、

まあ、乗りかかった船ということで・・・・

<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>

.

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/09/22 11:20

No.5

回答者： arenani_sorenani
回答日時：2006/02/11 07:46

WinXPのIE6.0・NN7.1・FF1.5で確認してますが、動作は問題ない(Winでは)はずです。

＞参考にして、コードを書きました。
ご自分の書き間違えではないでしょうか・・

私の貼ったソースをコピーしてメモ帳に貼り、拡張しを.htmlに変えて
ブラウザで開いてみてください。

.

この回答への補足

ありがとうございます。
プルダウンの内容は出現するようになりました。
しかし、「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>

補足日時：2006/02/13 14:12

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/02/13 16:27

No.4

回答者： arenani_sorenani
回答日時：2006/02/10 23:20

すみません。

先ほどのは変数の一部がコピーしたまま書き換えてなかったので
修正したものを貼り直します。

<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>

.

この回答への補足

とても難しいのですね・・詳しく書いて頂きありがとうございます。

参考にして、コードを書きました。が、スミマセン、恐縮なのですが、修正版を使用させていただきまして、ブラウザで確認したところ、プルダウンの内容が一つも出なくなってしまいました。

Frontpageに移し変えて、プレビューを見たところ、
「thisweekが宣言されていません」という内容が出ます。
これはどのように対処すればよいでしょうか？

補足日時：2006/02/11 01:11

通報する

- 0
- 件

通報する

No.3

回答者： arenani_sorenani
回答日時：2006/02/10 22:49

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>

.

- 0
- 件

通報する

No.2

回答者： Chronos198
回答日時：2006/02/10 16:40

そこまで来ていればあと一息です。

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等を使う必要があります。

この回答への補足

ありがとうございます！

今、アドバイスを参考に、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]:と書いてみたり(笑)、
いろいろ試してみますが、音沙汰ないと言った感じです。これからどう記述すればよいでしょうか？