ラジオボタンによるメニューの操作

質問

ラジオボタンクリック時に、メニューの内容を変化させたいのですが、どうすればいいのでしょうか？
javascriptでやればいいのか、HTMLでやればいいのかわかりません。

また、メニューに触れたときにラジオボタンを切り替えるにはどうすればいいのでしょうか？
よろしくお願いします。

回答No.1

kodai_sumio · ベストアンサー

これらの動作はJavaScriptを使用します。
まず、ラジオボタンをクリックしたときの動作ですが、
ラジオボタンにそれぞれ、関数を付けます。また関数には引数を当てておきます。
<INPUT TYPE="radio" NAME="radio" VALUE="radio1" onClick="ChangeMenu(1)">ラジオ１
<INPUT TYPE="radio" NAME="radio" VALUE="radio2" onClick="ChangeMenu(2)">ラジオ２
・
・
・

JavaScriptの方では関数を組みます。ここには変化させたいメニューの項目と、その値を書いておきます。これらの項目は元のメニューの数と同じでなければなりません。
function ChangeMenu(a){
with(document.form1){
if(a == 1){
OP.options[0].text="メニュー選択";
OP.options[1].text="ラジオ1-a";
OP.options[2].text="ラジオ1-b";
OP.options[0].value="";
OP.options[1].value="radio1-a";
OP.options[2].value="radio1-b";
}else if(a == 2){
OP.options[0].text="メニュー選択";
OP.options[1].text="ラジオ2-a";
OP.options[2].text="ラジオ2-b";
OP.options[0].value="";
OP.options[1].value="radio2-a";
OP.options[2].value="radio2-b";
}else{
・
・
・
}
}
}

これをいくつも組み合わせれば、どんどん変化する数は増えていきます。また、項目や値を配列に格納して、ループで呼び出してやるとソースが見やすくなります。

メニューに触れたときにラジオボタンを切り替える方法は
<OPTION onChange="ChangeRadio()" NAME="OP">
とし、メニューそれぞれの値を関数の引数とします。

function ChangeRadio(){
var value=document.form1.OP.selectedIndex;
value=document.orm1.OP.options[vakue].value;
if(value == "radio1-a"){
document.form1.radio[0].click();
}else if(value == "radio2-a"){
document.form1.radio[1].click();
}else{
・
・
・
}
}

こんな感じです。

お礼

迅速で詳しい回答、ありがとうございます。
メニューに触れたときラジオボタンを操作するのは、
これでできそうです。

ラジオボタンクリック時のほうについては、
こちらのたずね方が悪かった為、誤解を招いてしまったようです。

ラジオボタンクリック時、メニューの『現在表示されている内容』を
他の値にかえるだけでいいです。

たとえば、
項目が
<OPTION VALUE="">24
<OPTION VALUE="">25
<OPTION VALUE="">26
<OPTION VALUE="">27
<OPTION VALUE="">28
<OPTION VALUE="">29
<OPTION VALUE="">30
とあり、現在28が選択されていて、ラジオボタンを押したら
24が表示される（初期選択に戻る）、
というようにしたいです。

それでも、メニューに触れたときのやつは
大変助かりました。
本当にありがとうございました。