セレクトメニュー選択でもう一つセレクトメニューを出す

2023/08/07 15:39

このQ&Aのポイント

セレクトメニュー選択で部署名を表示する方法を知りたい
現在のコードでは、ブロック名を選択しても部署名が正しく表示されない
どのような修正をすれば、正しい部署名を選択することができるのか

ベストアンサー

セレクトメニュー選択でもう一つセレクトメニューを出す

2007/10/04 12:47

「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。しかし、「ブロック名」を「Ａブロック」選択しても「部署名」が「Ｂトップ～」が出てしまいます。何がおかしいのか分からないので、ぜひ教えてください。よろしくお願いいたします。 menuItem = [　　["Ａトップ","A本部","B本部","C本部"], ["Ｂトップ","1本部","2本部","3本部"], ["Ｃトップ","あ本部","い本部","う本部"], 　　　　　　　　["Ｄトップ","●本部","▲本部","◆本部"] ]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------------------- <SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)"> <OPTION selected value="0">選択してください</OPTION> <OPTION value="a-block">Aブロック</OPTION> <OPTION value="b-block">Bブロック</OPTION> <OPTION value="c-block">Cブロック</OPTION> <OPTION value="d-block">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="visibility:hidden"> <OPTION selected value="0">選択してください</OPTION> </SELECT>

machaleo
お礼率41% (10/24)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

SAYKA
ベストアンサー率34% (944/2776)

2007/10/04 14:05 回答No.1

よくある罠に陥ってるみたいだよこれは　selectedindex　は正しい値を返してるけれど「選択して下さい」がアイテムのひとつであって「Ａブロック」は1を返す。だけど部署の配列はAが0でなければならない。。。というのを認識できてない事に起因している。しかしそのままー1で演算すると他の選択から「選択してください」へ戻すと・・・なので簡単につじつまを合わせるにはmenuitemに0用のデータを追加する事かな。

質問者

お礼 2007/10/04 15:57

出来ました!!!!!　本当にありがとうございました。感激です!!まだまだ勉強不足なので、頑張ってわかるようになります!!!

関連するQ&A

セレクトメニューからもう一つのセレクトメニューを選択したか確認
「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしました。送信前に「ブロック名」だけでなく、「部署名」も選択したかそうか確認したのですが、どうしでも出来ません。いろいろ試しても出来なくて困っています。ぜひ教えてください。よろしくお願いいたします。 ---------------------------------------------------------------- menuItem =[[" "], ["(2) 部署を選択　","あああ","いいい"], 　　　　　["(2) 部署を選択　","ううう","えええ"], ["(2) 部署を選択　","おおお","かかか"], 　　　　　["(2) 部署を選択　","ききき","くくく"]]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------- <SELECT size="1" name="AREA" onchange="setMenuItem(this.selectedIndex)" style="color : #3d3d3d;"> <OPTION value="0" selected>(1) ブロックを選択　</OPTION> <OPTION value="Ａブロック">Ａブロック</OPTION> <OPTION value="Ｂブロック">Ｂブロック</OPTION> <OPTION value="Ｃブロック">Ｃブロック</OPTION> <OPTION value="Ｄブロック">Ｄブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="color : #3d3d3d;visibility : hidden;"> <OPTION selected value="0"></OPTION> </SELECT> ---------------------------------------------------------------- 確認用 if(document.form2.AREA.value=="0"){ alert("ブロックを選択してください"); return false; } return true; }
- 締切済み
- JavaScript
複数のセレクトメニューを制御するとき・・・
どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。ネットで探した方法で、セレクトメニュー１の項目を選択したときにセレクトメニュー２の項目を変化させる制御をしています。このフォームでDBにvalue値（1,2など数値で）を送信するようにしたいのですがこの方法ですとセレクトメニュー２のvalue値が0（NULL）となってしまい上手く送信できません。配列に文字列を入れていますし、DBの型をintにしているので0になってしまっていると思うのですが、文字列としては送信したくはありません。どのような方法でしたら文字列ではなく、上手くvalueに数値を入れることが出来るでしょうか。どうかよろしくおねがいします。以下使用しているコードです。 <html> <head> <title>テストテスト</title> <script language="JavaScript"></script> </head> <body> <form name="aaa"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb"> <option value="" selected>--- 選択してください ---</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
セレクトメニュー連動のテキストをクリアにしたい
下記のサンプルがあります。 <html> <head> <title>form TEST</title> <script>  </script> </head> <body onLoad="check()"> <form name= "form"> Value１ <select name="one" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value２ <select name="two" onchange="check()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Value３ <select name="three" style="visibility:hidden" onchange="txtchg()"> </select> Value４ <textarea name="four" rows="1" cols="10"></textarea> </form> </body> </html> これは、Value1の選択値によってValue3の選択肢を変えて、Value2とValue3の選択値の組み合わせの結果をValue4に記入するという動作のサンプルです。でもこれですと、Value2とValue3の結果でValue４に記入された後に、Value1やValue2を変更した場合、Value3は初期値に戻るのですが、Value4はそのまま表示されたままになってしまいます。本当はValue3が初期値に戻ったのだから、その場合はValue4をクリアにしたいのですが。どこをどう修正すればその動作が可能になるのか、ご教示お願い致します。
- ベストアンサー
- JavaScript
メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法
メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法２つのコンボがります。 1個目は、メーカーを選択します。２個目は、機種を選択します。下記ソースでは、valueの値が取得でいないようです。（例） makerでドコモを選択したらvalueに１をセット sendwayでドコモ機種(2)を選択したらvalueに２をセットこのようなことを実現したいのですが．．．よろしくお願いします。 <script language="JavaScript"></script> <select name="maker" onChange="setMenuItem(this.selectedIndex)"> <option value="1" <?= $val?>>ドコモ</option> <option value="2" <?= $val?>>ドコモ以外</option> </select> <select name="sendway" > <option value="1" <?= $val?>>ドコモ機種(1)</option> <option value="2" <?= $val?>>ドコモ機種(2)</option> <option value="3" <?= $val?>>ドコモ以外機種</option> </select>
- ベストアンサー
- JavaScript
セレクトメニューの連動、そしてページへのリンク
[セレクトメニューA] > [セレクトメニューB] > [セレクトメニューC] …というような、まずAで選び、それに対応したメニューBのうちのひとつを選び、そして最後にCのうちのひとつを選ぶと、 (たとえば、Cのセレクトメニューには Yahoo Google Excite のようなのがあり、それらを選択すると、) あらかじめ設定しておいた該当するページへ行く、というようなしくみはどのように作ればいいのでしょうか？ネット上を探し回って、自分で組み立てて作ってみましたが、  ───────────────── <form name="myForm"> <select name="a" onchange="setMenu(this.selectedIndex)"> <option checked selected>セレクトA</option> <option value="A">A</option> <option value="E">E</option> <option value="H">H</option> </select> > <select name="sb" onchange="setMenuItem(this.selectedIndex)"> <option selected>　</option> </select> > <select name="s" onChange="popJump(this)"> <option selected >　</option> </select> </form> …と、３つを連動させるまでにはいたったのですが、最後の、「セレクトCを選んだときに該当ページへジャンプ」というのができません。このプログラムにどのような修正を加えればよいのでしょうか？よろしくお願いいたします。
- ベストアンサー
- JavaScript
2番目のセレクトメニュー選択項目に応じてリンク先を変えたい
説明が下手糞な事お許し下さい。 javaを使ったセレクトメニューをウェブサイトに導入しようと、ネットで調べ、試行錯誤を繰り返し、大雑把な形は出来たのですが、やはりどうもうまくいきません。やりたいことは、一つ目のセレクトメニュー（色）を選び、二つ目のセレクトメニュー（コンピューター）を選ぶと、個々に指定したアルファベットのリンクを表示したいのですが・・・以下のソースだと、初期状態では、ＡＢＣの3項目が最初から現れており、二つ目のセレクトメニューを選ぶと必ず、上段はＡ・中段はＢ・下段はＣと出てしまい、一つ目を選びなおすと前のリンクが残ったままになっております。黒のmacを選ぶとＡを、白のetcを選ぶとＡを、赤のWindowsを選ぶとＣを、といった感じで個々にリンク先を変えることができ、一つ目のセレクトメニューを選びなおすと前のリンク先の結果の表示が消える方法、初期状態でアルファベットのリンクを出さない方法は無いでしょうか？ご存知の方、どうかアドバイスをお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script language="JavaScript"></script> </head> <body> <form name="myForm"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="black">黒</option> <option value="white">白</option> <option value="red">赤</option> </select> <select name="Computer" onchange="setTable(this)"> <option value="windows">windows</option> <option value="mac">mac</option> <option value="etc">etc</option> </select> </form> <div id="tbl1" class="tbl"><a href="http://www.yahoo.co.jp/">A</a></div> <div id="tbl2" class="tbl"><a href="http://www.yahoo.co.jp/">B</a></div> <div id="tbl3" class="tbl"><a href="http://www.yahoo.co.jp/">C</a></div> </body> </html>
- ベストアンサー
- JavaScript
FORMデータを配列としてそうしんしたいのですが・・・
JavaScriptでセレクトボックス内の値が変化したらもう一つあるセレクトリスト内の値が変更されるように組みました。以下コード。 ----------------------- <HTML> <head> <script type="text/JavaScript">  </script> </head> <body> <FORM name = "myForm"> <SELECT name="list" onChange="setMenuItem(this.selectedIndex)"> <option value="list1">リスト１ <option value="list2">リスト２ <option value="list3">リスト３ </SELECT> <SELECT name="works[]" MULTIPLE> <OPTION>A <OPTION>B <OPTION>C <OPTION>D <OPTION>E </SELECT> </FORM> </BODY> </HTML> ----------------------- でセレクトリスト内のデータを配列として送信したいのですがうまくいきません。セレクトリストのnameはworks[]にしたら動作すらしなくなりました。どなたかご教授願います。
- ベストアンサー
- JavaScript
セレクトメニューの4連動
いつも参考にさせて頂いております。 javascript初心者です。現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。一つ目のセレクトで、地域の選択二つ目のセレクトで、県の選択三つ目のセレクトで、「プレイスポット」か「食事」の選択四つ目のセレクトでは、プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript">  </script> </head> <body> <form name="form1"> <select name="sel1" onChange="setA(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">関西</option> </select> <select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_c" onChange=""><option value="0" selected>---------------</option></select> </form> </body> </html>
- 締切済み
- JavaScript
ブラウザの戻るボタンを押したときのデータの保持の仕方
頻繁に書き込みして申し訳ありません。どなたかお手すきでしたら、稚拙な質問にお付き合いお願い致します。前回セレクトメニューについて教えて頂いたのですが、今回もセレクトメニューに関しての質問です。ＩＥでの話なのですが、セレクトメニュー１・２を選択しsubmitボタンで次のページに行き、ブラウザの戻るボタンで戻ってきたときにセレクトメニュー２の方のデータ（value）だけ保持できていません。前にＩＥはそのような仕様だという話を聞いたのですが、その時もこちらで質問させてもらいました。その時はselectタグにidを仕込んでおき、「window.onload」でgetElementByIdを使用するやり方を教わったのですが、今回はそれでうまくいきません。ネットで検索していてcookieを使用してデータを保持しておくというやり方も見かけたのですが、一番効率のよいやり方はどのようなものになるのでしょうか。どうかよろしくお願いします。以下ソースとなります。 <html> <head> <title>テストテスト</title> <script language="JavaScript"></script> </head> <body> <form name="aaa" action="./next.html" method="POST"> <select name="Maker" id="q1" onChange="setMenuItem(this.selectedIndex)"> <option value="" selected>--- 選択してください ---</option> <option value="1">ひとつ</option> <option value="2">ふたつ</option> <option value="3">みっつ</option> <option value="4">よっつ</option> </select> <select name="bbb" id="q2"> <option value="" selected>--- 選択してください ---</option> </select> <input type="submit" name="ok" vakue="ok"> </form> </body> </html>
- ベストアンサー
- JavaScript
JavaScriptのソースを外部ファイルに
サイトでひろったソースなのですが、このJavaScriptを外部のファイルに書きたいと思っているんですが、どうしてもうまく行きません。 index.htmlとscript.jsというファイルに分けたいです！！解答、宜しくお願い致します！！ <html> <head> <title>セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する</title> <script language="JavaScript"></script> </head> <body> <form name="myForm"> <select name="Maker" onChange="setMenuItem(this.selectedIndex)"> <option value="SHARP">SHARP</option> <option value="NEC">NEC</option> <option value="FUJITSU">FUJITSU</option> </select> <select name="Computer"> <option value="MZ-80K">MZ-80K</option> <option value="MZ-700">MZ-700</option> <option value="MZ-2500">MZ-2500</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript