ラジオボタンの選択に応じてプルダウンメニューの内容を変えたい

締切済

質問者：sr400_new
質問日時：2005/10/29 18:45
回答数：2件

はじめまして。どうぞよろしくお願いいたします。
教えていただきたいのは「ラジオボタンの選択で、その下のプルダウンメニューの内容を変える方法」です。
javaスクリプトがちんぷんかんぷんですので、初心者でも分かるようご回答いただけると幸いです。
どうぞよろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： yambejp
回答日時：2005/10/30 18:44

じゃ＃１さんとは別の方法で・・・。

セレクトのところの内容を単純にまるまる
書き換えてしまうというやり方です。
いいとこもあるし、わるいところもあります。
ほかにはselectのoptionを一度けして、必要な
ものをつけたしていくというやり方もありますね。

<form name="FORM1">
<input type="radio" name="radio1" value="0" id="r1" checked onclick="change(this.value)"><label for="r1">種類１</label>
<input type="radio" name="radio1" value="1" id="r2" onclick="change(this.value)"><label for="r2">種類２</label><br>
<span id="id1">
<select name="select1">
<option value="s1_1">種類１－１</option>
<option value="s1_2">種類１－２</option>
<option value="s1_3">種類１－３</option>
<option value="s1_4">種類１－４</option>
</select>
</span>
<input type=submit value="send">
</form>
<script languge="javascript">
function change(num){
var obj=document.getElementById('id1');
var data=new Array();
data[0]='<select name="select1"><option value="s1_1">種類１－１<option value="s1_2">種類１－２<option value="s1_3">種類１－３<option value="s1_4">種類１－４</select>';
data[1]='<select name="select1"><option value="s2_1">種類２－１<option value="s2_2">種類２－２<option value="s2_3">種類２－３<option value="s2_4">種類２－４</select>';
obj.innerHTML=data[num];
}
</script>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！
また分からないことがあった際には、どうぞよろしくお願いいたします！

通報する

お礼日時：2005/10/31 11:11

No.1

回答者： BLUEPIXY
回答日時：2005/10/30 04:54

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

あらかじめ用意しておいた、メニューの表示(inline)，非表示(none)をラジオボタンで切り換えます。
セレクトメニューは、１つでその内容を変更する必要があるような場合は、補足してください。
---------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>サンプル</title>
</head>
<body>
<form name="FORM1">
<input type="radio" name="radio1" value="kind1" id="r1" checked onclick="this.form.select1.style.display='inline';this.form.select2.style.display='none'"><label for="r1">種類１</label>
<input type="radio" name="radio1" value="kind2" id="r2" onclick="this.form.select2.style.display='inline';this.form.select1.style.display='none'"><label for="r2">種類２</label><br>
<select name="select1" style="display='inline'">
<option value="s1_1">種類１－１</option>
<option value="s1_2">種類１－２</option>
<option value="s1_3">種類１－３</option>
<option value="s1_4">種類１－４</option>
</select>
<select name="select2" style="display='none'">
<option value="s2_1">種類２－１</option>
<option value="s2_2">種類２－２</option>
<option value="s2_3">種類２－３</option>
<option value="s2_4">種類２－４</option>
</select>
</form>
</body>
</html>