JavaScriptを使ってプルダウン操作をしております。
一つ目のプルダウンで選択したあと2つ目のプルダウンのoptionの部分だけ表示・非表示をしたいのです。そんなことはできるのでしょうか?
下のソースで説明しますが、一つ目のリストで「あいうえお」を選択した時点で2つ目の選択リストの「ひらがな1」と「ひらがな2」だけを選択できるようにしたいのです。「カタカナ1」「カタカナ2」は非表示もしくは選択不可にできればいいのですが。
一つ目のプルダウンリスト
<select name="formtype" onchange="form_indicate();">
<option value="AAA">あいうえお
<option value="BBB">アイウエオ
</select>
二つ目のプルダウンリスト
<select name="formtype2">
<option value="aaa">ひらがな1
<option value="bbb">ひらがな2
<option value="ccc">カタカナ1
<option value="ddd">カタカナ2
</select>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
こんな感じでどうですか?
<script language="JavaScript"><!--
menuItem = [ [ ] , ["ひらがな1","ひらがな2"] , ["カタカナ1","カタカナ2"] ];
menuvalue = [ [ ] , ["aaa","bbb"] , ["ccc","ddd"] ];
function setMenu(n) {
m = document.form.formtype.value;
len = document.form.formtype2.options.length;
for (i=len-1; i>=0; i--) {
document.form.formtype2.options[i] = null;
}
document.form.formtype2.style.visibility = "visible";
document.form.submit.style.visibility = "visible";
if(m == ""){
document.form.formtype2.style.visibility = "hidden";
document.form.submit.style.visibility = "hidden";
}
for (i=0; i<menuItem[n].length; i++) {
document.form.formtype2.options[i] = new Option(menuItem[n][i],menuvalue[n][i]);
}
}
// --></script>
</head>
<body>
<form name="form" action="./test.cgi">
<select name="formtype" onChange="setMenu(this.selectedIndex)">
<option value="">選択すれば次のセレクトが出ます</option>
<option value="AAA">あいうえお</option>
<option value="BBB">アイウエオ</option>
</select>
<select name="formtype2" style="visibility:hidden">
<option value=""></option>
</select>
<input type="submit" value="送信" name="submit" style="visibility:hidden">
</form>
No.1
- 回答日時:
このようなときは、2つ目を
<select name="formtype2a">
<option value="aaa">ひらがな1
<option value="bbb">ひらがな2
</select>
<select name="formtype2b">
<option value="ccc">カタカナ1
<option value="ddd">カタカナ2
</select>
のように2つに分けて、それぞれをstyleのdisplayでON/OFF
にします。
この回答への補足
早速の返信ありがとうございます。
optionのdisplayはできないのでしょうか?
確かに、おっしゃるその方法は試してOKではあったのですが、問題が発生しました。
実はCGIでプログラムを組んでいるのですが、本来のソースは以下のようになっています。
<select name="formtype" onchange="form_indicate();">
<option value="AAA" selected>あいうえお
<option value="BBB">アイウエオ
</select>
二つ目のプルダウンリスト
<select name="formtype2a">
<option value="aaa">ひらがな1
<option value="bbb">ひらがな2
</select>
三つ目のプルダウンリスト
<select name="formtype2b">
<option value="ccc">カタカナ1
<option value="ddd">カタカナ2
</select>
このようにソースを書いているのですが一つ目のプルダウンを「アイウエオ」に変更するとdisplayで3つ目のプルダウンが表示はされるのですがvalueが送られないのです。
CGIが悪いのかもしれませんが、とりあえずJavaScriptでoptionを非表示にできたらなあと思いまして・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見る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ボックスの選択結果を変...
-
同じ名前のセレクトがある場合...
おすすめ情報