まずラジオボタンがあって、選択するとfunctionに格納してあるプルダウンをラジオボタンの下の指定した箇所に表示させたいです。ラジオボタンを変更すると、プルダウンも変わるようにしたいです。教えてください。お願いします。 '); document.write(' 1-1 '); document.write(' 1-2 '); document.write(' '); } function pulldown2(){ document.write(' '); document.write(' 2-1 '); document.write(' 2-2 '); document.write(' '); } //--> タイプ１タイプ２

こんな感じでどうでしょ？ function setSelect(obj){ var f=obj.form; var n=obj.parentNode.firstChild; while(n){ if(obj.name==n.name) f[n.value].className="hide"; n=n.nextSibling; } f[obj.value].className=""; } .hide{ display:none; } タイプ１タイプ２タイプ３タイプ４ 1-1 1-2 2-1 2-2 3-1 3-2 4-1 4-2 見栄えに関してはクラスで調整するのがベター。またformにnameをつけるのは非推奨。スタイルシートもvisibilityよりはこの場合はdisplayの方がきれいかも。

HTML内の指定の位置にプルダウンを読み込みたい

解決済

質問者：ultra-goo
質問日時：2008/06/03 10:27
回答数：2件

まずラジオボタンがあって、
選択するとfunctionに格納してあるプルダウンを
ラジオボタンの下の指定した箇所に表示させたいです。
ラジオボタンを変更すると、プルダウンも変わるようにしたいです。
教えてください。お願いします。

<HTML><HEAD>
<script type="text/javascript"></script>
<style type="text/css">
</HEAD>
<BODY><FORM>
<INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR>
<INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２
</FORM></BODY>
</HTML>

通報する

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

質問の本文を隠す

回答 (2件)

No.2ベストアンサー

回答者： yambejp
回答日時：2008/06/03 12:16

こんな感じでどうでしょ？

<html>
<head>
<script type="text/javascript">
function setSelect(obj){
var f=obj.form;
var n=obj.parentNode.firstChild;
while(n){
if(obj.name==n.name) f[n.value].className="hide";
n=n.nextSibling;
}
f[obj.value].className="";
}
</script>
<style>
.hide{
display:none;
}
</style>

</head>
<body>
<form>
<input type="radio" name="rdoSample" value="AAA" onClick="setSelect(this)">タイプ１<br>
<input type="radio" name="rdoSample" value="BBB" onClick="setSelect(this)">タイプ２<br>
<input type="radio" name="rdoSample" value="CCC" onClick="setSelect(this)">タイプ３<br>
<input type="radio" name="rdoSample" value="DDD" onClick="setSelect(this)">タイプ４<br>
<select name="AAA" size="1" class="hide">
<option value="1-1" selected>1-1</option>
<option value="1-2">1-2</option>
</select>
<select name="BBB" size="1" class="hide">
<option value="2-1" selected>2-1</option>
<option value="2-2">2-2</option>
</select>
<select name="CCC" size="1" class="hide">
<option value="3-1" selected>3-1</option>
<option value="3-2">3-2</option>
</select>
<select name="DDD" size="1" class="hide">
<option value="4-1" selected>4-1</option>
<option value="4-2">4-2</option>
</select>
</form>
</body>
</html>

見栄えに関してはクラスで調整するのがベター。
またformにnameをつけるのは非推奨。
スタイルシートもvisibilityよりはこの場合はdisplayの方がきれいかも。

- 0
- 件

通報する

この回答へのお礼

すごい！！完璧です！！！
ありがとうございます！

通報する

お礼日時：2008/06/03 12:45

No.1

回答者： hisajiro
回答日時：2008/06/03 11:33

簡単な方法は

<html>
<head>
<title></title>
<script language="JavaScript">

</script>
</head>
<body>
<form name="form1">
<input type="radio" name="rdoSample" value="0" onClick="setSelect(this)">タイプ１<br>
<input type="radio" name="rdoSample" value="1" onClick="setSelect(this)">タイプ２<br>
<select name="AAA" size="1" style="visibility:hidden">
<option value="1-1" selected>1-1</option>
<option value="1-2">1-2</option>
</select> <br>
<select name="BBB" style="visibility:hidden">
<option value="2-1" selected>2-1</option>
<option value="2-2">2-2</option>
</select>
</form>
</body>
</html>
これで動きはできます。
後はこれをヒントに自分が思い描く動きになるようにがんばってください。
上記の方法は
セレクトボックスAAAとBBBを初期状態でhidden（非表示）に設定しておき、
ラジオボタンが押下されたら、片方をvisible（表示）に変え、もう片方をhiddenにするだけです。
他にはセレクトボックスを一つだけ表示した状態にし、
ラジオボタンが押下されたらoptionを書き換える方法もあります。