セレクトメニューの項目をリンクさせて変更する方法
- セレクトメニューの選択項目に応じて、他のセレクトメニューの内容を変更する方法を知りたいです。
- さらに複数のセレクトメニューの項目をリンクさせて変更することは可能でしょうか？
- 具体的な実装方法やサンプルコードなど、情報をお持ちの方がいらっしゃいましたら教えてください。
- ベストアンサー
セレクトメニューセレクトメニューへのジャンプ
こんにちは。 セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、 さらにもう一つ、＋もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか？ 例えば、 セレクトメニュー(1) 選択 ↓ ジャンプ セレクトメニュー(2) 選択 ↓ ジャンプ セレクトメニュー(3) 選択 ↓ ジャンプ セレクトメニュー(4) 選択 ↓ 検索用CGI実行 クリック というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。 参考サンプル等、 どなたか情報をお持ちの方がおりましたら、 よろしくお願いいたします。
- kal1119
- お礼率69% (96/139)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じになります。 サンプルのセレクトは３つです。 初心者ということで甘えず、セレクト４つ に対応できるよう、頑張ってください。 ★★★★★★★★★★★★★★★★ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <script language="javascript"> <!--// // var strfruit = new Array("ミカン","ブドウ","サクランボ"); // var strmikan = new Array("温州","甘夏","八朔","伊予柑"); var strbudou = new Array("デラウェア","巨峰","マスカット"); var strsakuranbo = new Array("高砂","佐藤錦","ナポレオン"); // var strunsyu = new Array("200","202","203"); var stramanatu = new Array("210","212"); var strhassaku = new Array("220","222","224"); var striyokan = new Array("230","232"); // var strdela = new Array("300","302","303"); var strkyoho = new Array("310","312"); var strhassaku = new Array("320","322","324"); var strmascut = new Array("330","332"); // var strtakasago = new Array("400","402","403"); var strsatou = new Array("410","412"); var strhnapoleon = new Array("420","422","424"); // function CreateList() { Create(document.frmSample.lstsel1, strfruit); CreateList2(); } //クリア関数 function Clearsel2() { //現在のプルダウンＢの個数分削除する for (nDel = document.frmSample.lstsel2.options.length -1; nDel >= 0 ; nDel--) { document.frmSample.lstsel2.options[nDel] = null; } } function Clearsel3() { //現在のプルダウンＣの個数分削除する for (nDel = document.frmSample.lstsel3.options.length -1; nDel >= 0 ; nDel--) { document.frmSample.lstsel3.options[nDel] = null; } } function CreateList2() { var nSelectval; Clearsel2(); Clearsel3(); nSelectval = document.frmSample.lstsel1.value; if (nSelectval == "ミカン") { Create(document.frmSample.lstsel2, strmikan); } if (nSelectval == "ブドウ") { Create(document.frmSample.lstsel2, strbudou); } if (nSelectval == "サクランボ") { Create(document.frmSample.lstsel2, strsakuranbo); } CreateList3(); } function CreateList3() { var nSelectval; Clearsel3(); nSelectval = document.frmSample.lstsel2.value; if (nSelectval == "温州") { Create(document.frmSample.lstsel3, strunsyu); } if (nSelectval == "甘夏") { Create(document.frmSample.lstsel3, stramanatu); } if (nSelectval == "八朔") { Create(document.frmSample.lstsel3, strhassaku); } if (nSelectval == "伊予柑") { Create(document.frmSample.lstsel3, striyokan); } if (nSelectval == "デラウェア") { Create(document.frmSample.lstsel3, strdela); } if (nSelectval == "巨峰") { Create(document.frmSample.lstsel3, strkyoho); } if (nSelectval == "マスカット") { Create(document.frmSample.lstsel3, strmascut); } if (nSelectval == "高砂") { Create(document.frmSample.lstsel3, strtakasago); } if (nSelectval == "佐藤錦") { Create(document.frmSample.lstsel3, strsatou); } if (nSelectval == "ナポレオン") { Create(document.frmSample.lstsel3, strhnapoleon); } } //この関数はIEのみです。NNを検討する場合はサンプル4-11をご覧ください。 function Create(objList, objArray) { var nMax = objArray.length; var nLoop = 0; for (nLoop = 0; nLoop < nMax; nLoop++) { var oAdd = document.createElement("OPTION"); oAdd.text = objArray[nLoop]; oAdd.value = objArray[nLoop]; objList.add(oAdd); } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0" onLoad="CreateList()"> <center> <FORM name="frmSample"> 品名：<SELECT size="1" name="lstsel1" onChange="CreateList2()"></SELECT><BR> 銘柄：<SELECT size="1" name="lstsel2" onChange="CreateList3()"></SELECT><BR> 単価：<SELECT size="1" name="lstsel3" ></SELECT> </center> </BODY> </HTML>
その他の回答 (2)
- kokorone
- ベストアンサー率38% (417/1093)
基本的には繰り返しになりますが、注意事項があります。 ＳＥＬＥＣＴ１ ＳＥＬＥＣＴ２ ＳＥＬＥＣＴ３ ミカン 温州 ￥３００ ￥３１０ ￥３２０ 甘夏 ￥３５０ ￥３６０ 八朔 ￥３７０ ￥３８０ ブドウ デラウェア ￥４００ ￥４１０ 巨峰 ￥４５０ ￥４６０ ￥４７０ サクランボ 佐藤錦 ￥５００ ￥５１０ 高砂 ￥５２０ ￥５２５ ナポレオン ￥５３０ ￥５５０ と言うように、上位の選択肢により、表示する内容・ 件数が変化しますので、表示データをＴＡＢＬＥ化 すると、いいでしょうね。 また、上位の選択肢が変更された場合、最下層の選 択肢までを初期化することを忘れないでください。
お礼
早速のご回答ありがとうございます。 しかし、JavaScript初心者なもので 大変申し訳ありませんが、 参考URLやサンプルのURLなどがありましたら 大変助かります。 よろしくお願いいたします。
- kokorone
- ベストアンサー率38% (417/1093)
>セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、 どう、理解されたのでしょうか？ OnChangeで次のselectを初期化・オプション追加 ですよね。 ということは・・・・・・ 何がわからないのか、わかりません。
補足
申し訳ありません、付け足します。 サンプルをもとに、こんな感じで作ってみました。 ---------------------------------------- <html> <head> <title>入力フォーム</title> <script language="JavaScript"><!-- menuItem = [[""],["---","TEST1","TEST2","TEST3"]]; function setMenuItem(n) { len = document.myForm.Server.options.length; for (i=0; i<len; i++) { document.myForm.Server.options[i] = null; } for (i=0; i<menuItem[n].length; i++) { document.myForm.Server.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } // --></script> <script language="JavaScript"><!-- modelItem = [[""],["---","sjpx011","sjpx0112"],["---","tjpx232"]]; function setModelItem(n) { len = document.myForm.Model.options.length; for (i=0; i<len; i++) { document.myForm.Model.options[i] = null; } for (i=0; i<ModelItem[n].length; i++) { document.myForm.Model.options[i] = new Option(modelItem[n][i],modelItem[n][i]); } } // --></script> </head> <body> <form name="myForm"> <select name="Test" onChange="setMenuItem(this.selectedIndex)"> <option value="">---</option> <option value="CASE1">CASE1</option> </select> <select name="Server" onChange="setModelItem(this.selectedIndex)"> <option value="">---</option> </select> <select name="Model"> <option value="">---</option> </select> <select name="Rev"> <option value="">---</option> </select> </form> </body> </html> ---------------------------------------- 現状ですと、 "Test"を選択→"Server"から選択→"Model" と言うのを "Test"→"Server"→"Model"→"Rev"をひも付かせたいのですが、これ以上の分岐がよくわかりません。 もう一つ同じよなスクリプトを記述するだけで良いのでしょうか？ それか、もっとよい方法があるのでしょうか？ 以上、よろしくお願いいたします。
関連するQ&A
- セレクトメニューについて
ＨＴＭＬでフォームを作っています。 セレクトメニュー（クリックするとメニューが出てきて一つ選ぶやつ）がいくらかあります。 前のセレクトメニューの選ばれたものによって、次のセレクトメニューの選択肢を変更するにはどうすればよいのでしょうか？ ｃｇｉの実行も可能です。 御願いします。
- ベストアンサー
- HTML
- セレクトメニューの選択項目変更で入力した値を変更する。
例 第一選択のセレクトメニューで項目Aを選択。 第二選択で項目Aの数値を取得。 第一選択のセレクトメニューで項目Bを選択。 第二選択で項目Bの数値を取得。 (第二選択はセレクトかテキスト入力の予定です) 取得した値をAもしくはBに代入。 計算式(A*2)+(2/B) もしくは 計算式a (a*2)+10 計算式b (b*2)+10 と言う風に選択項目によって代入位置を変更したいです。 計算式も代入する値も多くあるのでセレクトメニューで選択して その位置を変更したいのですが、どのようにしたらいいのでしょうか? 他に良い方法とかあるものなんでしょうか?? 初心者でサンプル例文を切り張り修正でしか作れません。(-_-;) 専門用語とか詳しく説明されても解らないと思うので、 例文だけでも書いていただいたらありがたいです。 あとはなんとか例文を参考に自分で調べて構文の仕組みを理解するのでお願いします。<(_ _)>
- ベストアンサー
- JavaScript
- ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。
はじめまして。質問させてください。 セレクトメニューを選択するときに たとえば、左のセレクトメニューに巨人を選択すると右の セレクトメニューには巨人の選手を選択する項目になり、 左のセレクトメニューから阪神と選ぶと、右のセレクトメニューの項目が阪神の選手の項目になるように左のセレクトメニューのと右のセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですが、（javascriptを知らない人でも項目を変更できるように） たとえば、ここのサイトのようにhttp://www.kyoto-su.ac.jp/~ushitaki/JavaScriptExample/introselect2.html 左のメニューの項目を選んだら、右の項目は左の項目にそった選択肢になるという形にしたいのです。 この場合どのようなやり方がありますでしょうか。ご教授のほどよろしくお願いいたします。 また、似たようなセレクトメニューがあるＵＲＬをご存知の方がいたら教えてください。よろしくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトメニューに値を戻す
よろしくお願いします。 現在、 (1)「入力ページ」から値を取得しCSVに書き込み (2)特定キーによりCSVの内容を「編集ページ」に読み出し と言うことを行いたいのです。 (1)は問題ないのですが、 (1)の「入力ページ」からセレクトメニューで取得した値を(2)でもセレクトメニューで取得したいのですが可能でしょうか？ 要は(1)も(2)も見た目を同じに、 「入力ページ」は新規入力用、「編集ページ」は変更・更新用というふうに使いたいです。 例えば、 セレクト項目の内容が、 北海道 青森県 岩手県 宮城県 となっており、(1)で「青森県」を選択→CSVへ書き込み とし、 (2)の表示の時にセレクトメニューには「青森県」が表示されており、かつ上記の項目が選択可能であるようにしたいのですが、 どなたか情報等お持ちの方いらっしゃいましたら、 よろしくお願いいたします。 webサーバー・・・HP-UX web・・・IE CGI開発言語・・・Perl 開発端末・・・windows2000(Tera Term 使用)
- ベストアンサー
- JavaScript
- セレクトメニューの選択項目によって、もう１つのセレクトメニューの項目と項目数を変更する
もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。 たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。
- ベストアンサー
- JavaScript
- ジャンプメニューの表示を初期値に戻したい
左フレーム（frame name="menu"）にジャンプメニューを５個つけて、右フレーム（frame name="main"）にジャンプ先が表示されるページで、 ジャンプしてもフレームセットは解除せずに target="main"で表示させます。 ジャンプ後にジャンプメニューの表示を初期値（<option selected>の部分）に戻したいのですがどう記述すればいいですか？ 現在のスクリプトは以下の通りです。以下のものに付け足す形で記述したいです。 ●スクリプト部分 function go (_url) { if (_url == "--") { return; } else { form1.target="main"; form1.action = _url; form1.submit(); } } <select onChange="go(this.options[this.selectedIndex].value)"> ●フォーム部分 <select onChange="go(this.options[this.selectedIndex].value)" name="select1"> <option value="--" selected>Select Menu</option> <option value="sample1.htm">サンプル１</option> <option value="sample2.htm">サンプル２</option> </select> 以上です。
- ベストアンサー
- JavaScript
- FORMで、セレクトメニューで選択してボタンを押すとリンク
ホームページの話です。 FORMで、セレクトメニューを作ります。 選択して、ボタンをクリックすることにより、 新しいウィンドウに、指定した大きさで リンクを開くようにするにはどのように したらいいのですか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトメニューで２つの項目や値を渡す方法はありますか？
良かったら教えてください。 セレクトメニューで２つの項目や値を渡す方法は ありますか？ 普通は、 <select name="test"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> と言う感じですが、 「テスト」を選ぶと name="test1" name="test2"の項目で、 value="1111" value="2222" 選択項目は、１つですが、2つの項目、 2つの値を次のCGIに渡す事は、 可能でしょうか？ 教えてください。
- ベストアンサー
- HTML
- ホームページのセレクトメニューについて
お世話になります。 HPでプルダウンメニューのセレクト画面を、 選択した瞬間に、ページが変わるようにしてみたいと 思っているのですが、どのようにすればよろしいのでしょうか。 普通にセレクト画面を選択して、フォームの送信 ボタン等をクリックすれば、ページの変化は出来るの ですけれども、この様な方法もやってみたいと思っています。 よろしくお願いいたします。
- ベストアンサー
- PHP
- javaScriptで連動セレクトメニュー
javaScriptで２つコンボの連動セレクトメニューを作りたいのですが、 下記URLを参考にしようと思っております。 http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、 各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、方法が分かりません。 参考になるサイト、アドバイス等宜しくお願いいたします。
- 締切済み
- JavaScript
お礼
ありがとうございます。 サンプルを参考にセレクト4つで作成することができました。 本当に、感謝いたします。