まずラジオボタンがあって、
選択するとfunctionに格納してあるプルダウンを
ラジオボタンの下の指定した箇所に表示させたいです。
ラジオボタンを変更すると、プルダウンも変わるようにしたいです。
教えてください。お願いします。
<HTML><HEAD>
<script type="text/javascript"><!--
function pulldown1(){
document.write('<select name="AAA" size="1">');
document.write('<option value="1-1" selected>1-1</option>');
document.write('<option value="1-2">1-2</option>');
document.write('</select>');
}
function pulldown2(){
document.write('<select name="BBB" size="1">');
document.write('<option value="2-1" selected>2-1</option>');
document.write('<option value="2-2">2-2</option>');
document.write('</select>');
}
//--></script>
<style type="text/css">
</HEAD>
<BODY><FORM>
<INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ1 <BR>
<INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ2
</FORM></BODY>
</HTML>
No.2ベストアンサー
- 回答日時:
こんな感じでどうでしょ?
<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)">タイプ1<br>
<input type="radio" name="rdoSample" value="BBB" onClick="setSelect(this)">タイプ2<br>
<input type="radio" name="rdoSample" value="CCC" onClick="setSelect(this)">タイプ3<br>
<input type="radio" name="rdoSample" value="DDD" onClick="setSelect(this)">タイプ4<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の方がきれいかも。
No.1
- 回答日時:
簡単な方法は
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function setSelect(rdb) {
if (rdb.value == "0") {
document.form1.AAA.style.visibility = "visible";
document.form1.BBB.style.visibility = "hidden";
} else {
document.form1.BBB.style.visibility = "visible";
document.form1.AAA.style.visibility = "hidden";
}
}
// -->
</script>
</head>
<body>
<form name="form1">
<input type="radio" name="rdoSample" value="0" onClick="setSelect(this)">タイプ1<br>
<input type="radio" name="rdoSample" value="1" onClick="setSelect(this)">タイプ2<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を書き換える方法もあります。
ありがとうございます!
この方法で全く問題ないです!!
すみませんが、あと一歩教えてください。
最終的にラジオボタンとプルダウンを4つにしたいんです。
その場合はif elseでなくなると思うのですが
どういう記述をすればよいでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで<select>の<option...
-
select内を書き換えることは出...
-
selectを変更不可にしたい
-
select要素のvalueを配列で取得...
-
全てのselect要素をデフォルト...
-
プルダウンのoptionの表示・非...
-
javascriptでセレクトボックス...
-
連想配列を使ってコンボボック...
-
selectボックスの選択結果を変...
-
<input>の選択肢をプルダウンメ...
-
セレクトボックスで配列を呼び...
-
二つのセレクトボックス間での...
-
jqueryでセレクトメニュー+スク...
-
プルダウンを選択していないと...
-
プルダウンの値によって活性・...
-
select option value が IE だ...
-
addclassがうまく働きません
-
プルダウンで選択したCGIを動か...
-
セレクトボックスで選択した内...
-
Selectボックスの要素入力を省...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
selectを変更不可にしたい
-
javascriptでセレクトボックス...
-
全てのselect要素をデフォルト...
-
Selectボックスの一覧表示方法
-
リストボックス内の重複したも...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
JavaScriptで<select>の<option...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
selectを使った計算
-
select要素のvalueを配列で取得...
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
今日の日付を自動的にセレクト...
-
検索窓とプルダウンメニュー機...
-
【javascript】連想配列からセ...
-
selectボックスの選択結果を変...
-
同じ名前のセレクトがある場合...
おすすめ情報