| ポイント |
<![CDATA[
n = selOBJ.selectedIndex;
for (i=0; i<3; i++)
{
document.all["repText"+i].replaceAdjacentText("afterBegin",sMenu[n][i]);
}
<input type="radio" name="RD"><span id="repText0">
]]>
|
| 説 明 |
ラジオボタンの項目の文字を入れ替えるにはspanタグで変更したい文字を囲んでおきます。この時にid属性で名前を指定しておきます。id名で指定しておけば「id名.replaceAdjacentText(置換位置,置換文字列)」または「document.all["id名"].replaceAdjacentText(置換位置,置換文字列)」で文字列を変更することができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>セレクトメニューで選択された分類別にラジオボタンの項目を変える</title>
<script Language="JavaScript"><!--
sMenu = new Array();
sMenu[0] = new Array("マンガ","アニメ","ゲーム");
sMenu[1] = new Array("Lightwave3D","Max","Maya");
sMenu[2] = new Array("GoLive","Dreamweaver","HomePageBuilder");
function setRadio(selOBJ)
{
n = selOBJ.selectedIndex;
for (i=0; i<3; i++)
{
document.all["repText"+i].replaceAdjacentText("afterBegin",sMenu[n][i]);
}
}
// --></script>
</head>
<body>
<form name="myFORM">
<select onChange="setRadio(this)">
<option>ジャンル１
<option>ジャンル２
<option>ジャンル３
</select>
<br>
<input type="radio" name="RD"><span id="repText0">マンガ</span><br>
<input type="radio" name="RD"><span id="repText1">アニメ</span><br>
<input type="radio" name="RD"><span id="repText2">ゲーム</span><br>
</form>
</body>
</html>
]]>
|
| 補足説明 |
replaceAdjacentTextで指定できる置換位置は"beforeBegin","afterBegin","beforeEnd","afterEnd"があります。詳しくはhttp://msdn.microsoft.com/workshop/author/dhtml/reference/methods/replaceadjacenttext.aspを参照してください。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
セレクトメニューで選択された分類別にラジオボタンの項目を変える