
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で質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
新生活!引っ越してから困らないように注意すべきことは?
新しい職場や学校で元気いっぱいのスタートを切るためにも快適な生活環境を整えておきたい! >>
-
JavaScriptで<select>の<option>の値を評価して非表示したい
JavaScript
-
セレクトボックスの中を一部隠したい ( IE )
HTML・CSS
-
セレクトメニューで2つの項目や値を渡す方法はありますか?
HTML・CSS
-
4
javascriptでセレクトボックスのselected"を動的につ"
JavaScript
-
5
select値をhiddenのvalueに渡したい
HTML・CSS
-
6
<input>の選択肢をプルダウンメニューから受け取り、hiddenで
JavaScript
-
7
プルダウンの値によって活性・非活性をするには
JavaScript
-
8
全てのselect要素をデフォルトの値に戻す方法
JavaScript
-
9
SELECT要素の垂直位置
HTML・CSS
-
10
リクエストに応じたselectedの初期値設定方法
Java
-
11
TABLEのセルの中の文字を行単位、セル単位で色を変えたい
HTML・CSS
-
12
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
13
フォームで同じ複数のnameで違うvalueの送信
Java
-
14
javascriptでselectボックスの<OPTION>要素数の取
JavaScript
-
15
「value」に2つの値をセットする方法
HTML・CSS
-
16
<SELECT>タグでの selected 状態にするには・・・。
JavaScript
-
17
jqueryでselect要素を表示・非表示する方
JavaScript
-
18
プルダウンで選択すると、DBの値を取得したい
JavaScript
-
19
プルダウンの表示位置
HTML・CSS
-
20
SQLで特定の項目の重複のみを排除した全項目を取得する方法
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
人気Q&Aランキング
-
4
セレクトメニューの値をクッキ...
-
5
Selectボックスの一覧表示方法
-
6
プルダウン選択を変更すると、...
-
7
チェックボックスの状態とテキ...
-
8
プルダウンで選択した項目にあ...
-
9
ラジオボタンの値が取得できな...
-
10
ドラッグ&ドロップしたらその...
-
11
onclickが動作しない
-
12
UWSCのIE操作でプルダウンを選...
-
13
大文字か小文字かを判断する方法
-
14
クリックさせたいが、click()が...
-
15
文字数を数える際に空白、改行...
-
16
hiddenを動的に作成したい
-
17
onclickで2個指定するには?
-
18
HTMLファイル同士での値渡し
-
19
二つの入力欄に、同時に同じ文...
-
20
ブラウザの戻るボタンを押した...
おすすめ情報