![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
フォーム(CGI)で入力するするときに、カテゴリと言う項目を作って、プルダウンでそれぞれ大カテゴリ・中カテゴリ・小カテゴリと分けてそのカテゴリにあった項目を吐き出したいのですが、
ネットで調べましたら、JavaScriptで表示ができるとの事で、試行錯誤の結果、ちゃんと表示できるようになったのですが、CGIフォーム内でのformタグとjavaでのformタグが重複してプルダウン内のカテゴリが表示しなくなりました…。
私のやりたい方法としては、「教えて!goo」での投稿カテゴリーの様な方法(http://oshiete1.goo.ne.jp/oshiete_new.php3)でできればベストと考えております。
解決方法としてはどの様な方法がありますか?
皆さんお忙しいでしょうけど、ご教授下さい。
No.5ベストアンサー
- 回答日時:
こんにちは
例えばsel1の『C』がsel2までしか項目がないとすると対応するsel3プルダウンのリストはmenuI4とmenuV4なので
menuI4 = [ [ ] , [""] ];
menuV4 = [ [ ] , [""] ];
として
プルダウンを作るfunctionで(if(l == "sel2")の部分)
for (i=0; i<menuI[n].length; i++) {
document.form.sel3.options[i] = new Option(menuI[n][i],menuV[n][i]);
if(menuI[n][i] == "") { document.form.sel3.style.visibility = "hidden"; }
}
とすればO.K.でした
解決しました!
leap_day様、ほんとにほんとにありがとうございました!!
感謝しています!
また機会があれば宜しくお願いします!!
No.4
- 回答日時:
こんにちは
非常に申し訳ない(--;)
http://okwave.jp/qa2824040.html
こちらで答えたものを転用していたので不具合が出ていました(><)
menuI2がsel1で『A』を選択したときのsel3のプルダウン
menuI3がsel1で『B』を選択したときのsel3のプルダウン
menuI4がsel1で『C』を選択したときのsel3のプルダウン
となります
<SCRIPT language="JavaScript">
<!--
menuI1 = [ [ ] , ["sel1でAを選択時の項目","D","E"] , ["sel1でBを選択時の項目","F","G","H"] , ["sel1でCを選択時の項目","I"] ];
menuV1 = [ [ ] , ["","D","E"] , ["","F","G","H"] , ["","I"] ];
menuI2 = [ [ ] , ["sel2でDを選択時の項目","J","K"] , ["sel2でEを選択時の項目","L","M","N"] ];
menuV2 = [ [ ] , ["","J","K"] , ["","L","M","N"] ];
menuI3 = [ [ ] , ["sel2でFを選択時の項目","O","P"] , ["sel2でGを選択時の項目","Q"] , ["sel2でHを選択時の項目","R","S","T","U"] ];
menuV3 = [ [ ] , ["","O","P"] , ["","Q"] , ["","R","S","T","U"] ];
menuI4 = [ [ ] , ["sel2でIを選択時の項目","V","W","X"] ];
menuV4 = [ [ ] , ["","V","W","X"] ];
function set(n,l) {
if(l == "sel1") {
len = document.form.sel2.options.length;
for (i=len-1; i>=0; i--) {
document.form.sel2.options[i] = null;
}
document.form.sel2.style.visibility = "visible";
document.form.sel3.style.visibility = "hidden";
for (i=0; i<menuI1[n].length; i++) {
document.form.sel2.options[i] = new Option(menuI1[n][i],menuV1[n][i]);
}
if(n == "") { document.form.sel2.style.visibility = "hidden"; }
}
if(l == "sel2") {
len = document.form.sel3.options.length;
for (i=len-1; i>=0; i--) {
document.form.sel3.options[i] = null;
}
document.form.sel3.style.visibility = "visible";
if(document.form.sel1.selectedIndex == "1") { menuI = menuI2; menuV = menuV2; }
if(document.form.sel1.selectedIndex == "2") { menuI = menuI3; menuV = menuV3; }
if(document.form.sel1.selectedIndex == "3") { menuI = menuI4; menuV = menuV4; }
for (i=0; i<menuI[n].length; i++) {
document.form.sel3.options[i] = new Option(menuI[n][i],menuV[n][i]);
}
if(n == "") { document.form.sel3.style.visibility = "hidden"; }
}
}
// -->
</SCRIPT>
<form name="form" action="test0.cgi" method="post">
<select name="sel1" onChange="set(this.selectedIndex,'sel1')">
<option value="">セレクト1</option>
<option value="A">A</option>
<option vlaue="B">B</option>
<option vlaue="C">C</option>
</select>
<br>
<select name="sel2" style="visibility:hidden" onChange="set(this.selectedIndex,'sel2')"></select>
<br>
<select name="sel3" style="visibility:hidden"></select>
<br>
<input type="text" name="id" size="8">I D
<br>
<input type="password" name="pass" size="8">PASS
<br>
<input type="submit" value="submit" name="submit">
</form>
ちゃんと表示できる様になりました!!!
ほんとに感動しています!!!
ありがとうございます!!
しかし、
選択項目sel2まででsel3に項目がない様な場合、
sel3を非表示にしたいんですが、どうすればいいでしょうか?
何度も何度もすいません。
お願い致します!!
No.3
- 回答日時:
JavaとJavaScriptは別物であり、後者の略称がJavaであるわけでもなく、また後者の略称としてJavaという言葉を用いるのも適切ではありません。
Javaへ誤爆かますと大変ですよ^^;http://e-words.jp/w/Java.html
http://e-words.jp/w/JavaScript.html
関係ないですが、質問者さんのために一応…。
そうですね…。
ちゃんとした書き込みをしなくてすいませんでした。
紛らわしいですよね…。反省。
これからは気を付けます。
わざわざ、回答してくれてありがとうございました!
No.2
- 回答日時:
こんにちは
ちょっと違うかもしれないですけど・・・こんな感じですかね?
<SCRIPT language="JavaScript">
<!--
menuI1 = [ [ ] , ["セレクト2","D","E","F"] , ["セレクト2","G","H"] , ["セレクト2","I"] ];
menuV1 = [ [ ] , ["","D","E","F"] , ["","G","H"] , ["","I"] ];
menuI2 = [ [ ] , ["セレクト3","J","K"] , ["セレクト3","L","M","N"] ];
menuV2 = [ [ ] , ["","J","K"] , ["","L","M","N"] ];
menuI3 = [ [ ] , ["セレクト3","O","P"] , ["セレクト3","Q"] , ["セレクト3","R","S","T","U"] ];
menuV3 = [ [ ] , ["","O","P"] , ["","Q"] , ["","R","S","T","U"] ];
function set(n,l) {
if(l == "sel1") {
if(n ==0 ){
document.form.sel2.style.visibility = "hidden";
document.form.sel3.style.visibility = "hidden";
return false;
}
obj1 = document.form.sel1;
obj2 = document.form.sel2;
obj3 = document.form.sel1.value;
Item = menuI1;
Value = menuV1;
document.form.sel3.style.visibility = "hidden";
}
if(l == "sel2") {
if(n ==0 ){
document.form.sel3.style.visibility = "hidden";
return false;
}
obj1 = document.form.sel2;
obj2 = document.form.sel3;
obj3 = document.form.sel2.value;
Item = menuI2;
Value = menuV2;
if(document.form.sel1.selectedIndex == 2) {
Item = menuI3;
Value = menuV3;
}
}
len = obj2.options.length;
for (i=len-1; i>=0; i--) {
obj2.options[i] = null;
}
obj2.style.visibility = "visible";
for(i=0; i<Item[n].length; i++) {
obj2.options[i] = new Option(Item[n][i],Value[n][i]);
}
}
// -->
</SCRIPT>
<form name="form" action="test0.cgi" method="post">
<select name="sel1" onChange="set(this.selectedIndex,'sel1')">
<option value="">セレクト1</option>
<option value="A">A</option>
<option vlaue="B">B</option>
<option vlaue="C">C</option>
</select>
<br>
<select name="sel2" style="visibility:hidden" onChange="set(this.selectedIndex,'sel2')">
</select>
<br>
<select name="sel3" style="visibility:hidden">
<option></option>
</select>
<br>
<input type="text" name="id" size="8">I D
<br>
<input type="password" name="pass" size="8">PASS
<br>
<input type="submit" value="submit">
</form>
この回答への補足
なるほどですね!!
<form name="form" action="test0.cgi" method="post">
↑の様にすればいいんですね!!感動!!!!
早速<form>タグの中にnameを入れちゃったらきれいに動作しました!
しかし、下のプルダウン項目の連動性が分からないんですがお教え下さいませんか?
menuI1 = [ [ ] , ["セレクト2","D","E","F"] , ["セレクト2","G","H"] , ["セレクト2","I"] ];
menuV1 = [ [ ] , ["","D","E","F"] , ["","G","H"] , ["","I"] ];
menuI2 = [ [ ] , ["セレクト3","J","K"] , ["セレクト3","L","M","N"] ];
menuV2 = [ [ ] , ["","J","K"] , ["","L","M","N"] ];
menuI3 = [ [ ] , ["セレクト3","O","P"] , ["セレクト3","Q"] , ["セレクト3","R","S","T","U"] ];
menuV3 = [ [ ] , ["","O","P"] , ["","Q"] , ["","R","S","T","U"] ];
初めのmenuI1とmenuV1は分かったんですが、2,3の項目を入れ替えようと思ったのですが、どうしても思い通りに表示してくれません…。
どうぞお願い致します!!
No.1
- 回答日時:
こんにちは
javascriptでのform nameをCGIのform nameにしてやったらどんなですか?
<form name="***">
<select name="+++" onChange="set(this.selectedIndex)">
<option value="・・・">
・・・
</select>
・・・
この***をCGIのほうの<form>に
<form name="***" action="###.cgi" method="post">
のように・・・
早速の回答ありがとうございます!
私の場合、下記の様に2つのnameを使ってるんですけど、2通りやってみましたけどできませんでした…。
CGIのformタグには
<input type="####" name="abc" value="##">
<input type="####" name="123" value="###">
の様に2つのnameを使っています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- Excel(エクセル) vba フォーム軽量化 1 2022/09/07 18:59
- その他(Microsoft Office) Microsoft Edgeの「関心のあるカテゴリ」を表示させるには。 1 2023/03/16 18:05
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
ラジオボタンとドロップダウン...
-
テーブルにおける行(セルにプル...
-
Selectボックスの幅を自動で広...
-
セレクトで選んだ項目を表示さ...
-
CSVファイルを読みこみ、プルダ...
-
【javascript・PHP】プルダウン...
-
現在時刻を取得してフォームのs...
-
selectタグに直接onChangeを書...
-
セレクトボックスで現在選択さ...
-
javascriptでselectボックスの<...
-
リストボックスの操作について
-
セレクトメニューの連動、そし...
-
ブラウザの戻るボタンを押した...
-
int select(int n, fd_set *rea...
-
リストボックス間で値をコピー...
-
JavaScriptでのセレクトボック...
-
return trueとreturn falseの用...
-
TextBoxに半角数字以外を入れた...
-
onclickで2個指定するには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectの中身をfor文で入れる
-
Selectボックスの幅を自動で広...
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
jQuery セレクトボックスで選択...
-
UWSCのIE操作でプルダウンを選...
-
html selectの内容を初期値に戻す
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
テーブルにおける行(セルにプル...
-
selectタグに直接onChangeを書...
-
【javascript・PHP】プルダウン...
-
セレクトメニューで選択された...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
<textarea>にプルダウンを表示...
-
プルダウンで現在の年月日を取...
-
リストボックスの項目の順番を...
-
親ウィンドウのリスト値変更
おすすめ情報