- ベストアンサー
セレクトメニューの項目をリンクさせて変更する方法
- セレクトメニューの選択項目に応じて、他のセレクトメニューの内容を変更する方法を知りたいです。
- さらに複数のセレクトメニューの項目をリンクさせて変更することは可能でしょうか？
- 具体的な実装方法やサンプルコードなど、情報をお持ちの方がいらっしゃいましたら教えてください。
- 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"をひも付かせたいのですが、これ以上の分岐がよくわかりません。 もう一つ同じよなスクリプトを記述するだけで良いのでしょうか？ それか、もっとよい方法があるのでしょうか？ 以上、よろしくお願いいたします。
お礼
ありがとうございます。 サンプルを参考にセレクト4つで作成することができました。 本当に、感謝いたします。