• ベストアンサー

ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。

はじめまして。質問させてください。 セレクトメニューを選択するときに たとえば、左のセレクトメニューに巨人を選択すると右の セレクトメニューには巨人の選手を選択する項目になり、 左のセレクトメニューから阪神と選ぶと、右のセレクトメニューの項目が阪神の選手の項目になるように左のセレクトメニューのと右のセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですが、(javascriptを知らない人でも項目を変更できるように) たとえば、ここのサイトのようにhttp://www.kyoto-su.ac.jp/~ushitaki/JavaScriptExample/introselect2.html 左のメニューの項目を選んだら、右の項目は左の項目にそった選択肢になるという形にしたいのです。 この場合どのようなやり方がありますでしょうか。ご教授のほどよろしくお願いいたします。 また、似たようなセレクトメニューがあるURLをご存知の方がいたら教えてください。よろしくお願いいたします。

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.7

>detaの項目の外部ファイルselectMenu.txtにvalue要素も書けたらいいのですが なんとなく・のせられて、色々やらされてる気分になってきました…。 (元の質問と大分変わってきているし、項目を外部で入力させるにしても、バラバラなコードで入力させるというのも、コード設計とそれを利用するプログラムは密接な関係にあると思われるので、なんだかおかしい気がします…) でもまあ、せっかくここまでつきあったので、やっときます。 方法としては、色々あると思いますが、ほとんど同じでいく方針で サブメニューのテキストと値を {key:表示テキスト,value:値}の形で入力させることにします。 今までの部分を置き換えるだけなので、それほど大きな変更ではないと思います。(パターンとしても認知しやすいと思います) <script></script>の部分が分かれているのは、外部ファイルになっていると見なしてください。 長くはなっていますが、修正はほとんどありません。 この場合、MENUBのコードで、どのMENUAが選ばれたかわかるvalueになっているので、MENUAの方は、元に戻しました。もちろん、同様の修正をほどこすこともできます。 ------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>SELECT LIST で項目を絞り込む</title> <script type="text/javascript"> <!-- data = [ // [メイン分類,サブ分類並び,…], ["関西", {key:"京都",value:121}, {key:"大阪",value:165}, {key:"兵庫",value:177}, {key:"滋賀",value:132}, {key:"三重",value:147}, {key:"奈良",value:151}, {key:"和歌山",value:184}], ["中国", {key:"広島",value:224}, {key:"山口",value:278}, {key:"岡山",value:263}, {key:"島根",value:244}, {key:"鳥取",value:213}], ["四国", {key:"愛媛",value:339}, {key:"香川",value:368}, {key:"徳島",value:399}, {key:"高知",value:312}], ["九州", {key:"福岡",value:496}, {key:"佐賀",value:477}, {key:"長崎",value:468}, {key:"大分",value:459}, {key:"熊本",value:433}, {key:"宮崎",value:413}, {key:"鹿児島",value:465}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> <br> <input type="submit" value="送信"> </form> </body> </html>

ayako0401
質問者

補足

いや、なんかごめんなさい。学校の課題で難しいのやると評価されるんで、それで質問させてもらいました。最初のだけわかればよかったんですけど、とても丁寧に答えてくださったので、つい調子にのってたくさん質問してしまいました。本当にごめんなさい。 お気をわるくさせてしまい申し訳ありませんでした。 そして、丁寧に答えていただきましてありがとうございました。

その他の回答 (6)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.6

>フォームで送信したときにvalue要素も送られてくるようにしたい 現在の仕様では、value要素は、表示テキストと同じになっています。 value要素を数字にしたいということであれば <option value="値">表示テキスト</option> は、 プログラムでいうと new Option(data[i][0],data[i][0]); の部分で Option(表示テキスト,値) というふうになっています。 一般的に特別な値を振り分けるには、その部分もまた入力させないといけないですが単に順番に数値を設定するなら Option(data[i][0],data[i][0]); を Option(data[i][0],i+1); Option(data[no][i],data[no][i]); を Option(data[no][i],i); にするだけでいいです。 この場合、 <input type="submit" value="送信"> とかでサブミットすると 関西、兵庫を選んだ場合 MENUA=1&MENUB=3 の様になります。 上記のサンプルの場合1始まりの順序になっていますが、 #5の補足の様にするには、適宜+1とかバイアスして下さい。

ayako0401
質問者

補足

お返事ありがとうございます。とても参考になります。 >>一般的に特別な値を振り分けるには、その部分もまた入力させないといけないですが valueの数字がランダムで1,2,3・・・というふうな決まった順序でならんでいない場合、それもまた外部ファイルから読み込ませたいのですが、そうなると、いままで教えてくださったプログラムからかなりの修正が必要でしょうか? 京都が21,大阪が65という感じで数字がばらばらなのですが、その場合はどのような書き方をすればいいのでしょうか。できればdetaの項目の外部ファイルselectMenu.txtにvalue要素も書けたらいいのですが、不可能であれば複数の外部ファイルでもかまいません。もしいままでにおしえていただいたプログラムからの簡単な改造で修正できるのであればご教授ください。よろしくお願いいたします。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

><head>の中にいれて、src=もパスは間違いなくselectMenu.txtとやったのですが、selectタグの中はなにも表示されませんでした。。。 え~そうですか?? もともとの#3が動くのであれば、動くと思うのですが・・ #3は、動いたのでしょうか? 使われている <form name="FORM1"> <select name="MENUA" …> <select name="MENUB" …> の名前を合わせてありますか? また、テストされたブラウザはなんでしょう?

ayako0401
質問者

補足

BLUEPIXYさんごめんなさい!できました。どうやらわたしの記述ミスだったようです!ありがとうございました! それと、この方法でvalue要素も取得できますか? フォームで送信したときにvalue要素も送られてくるようにしたいのですが、それは難しいですか?京都は2,大阪は3,兵庫は4,というふうにvalueの値を数字で取得できますでしょうか?そのvalueの数字をフォームから送られてくるようにしたいんです。 なんかいっぱい質問してしまってすいません。 ほんとうに感謝してます。こんなに詳しく説明してくれてありがとうございます。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

>外部ファイルに書けばいいんですか?その場合ファイル名は任意でつけていいのですか? >どうやったら外部ファイルからoptionへ項目を読み込ませるのかがいまいちわかりません。 javascriptのファイルは、拡張子をjsにするのが慣例ですけども、ファイル名は任意で良いです。 例えば、 ファイル名を selectMenu.txt として data = [ // [メイン分類,サブ分類並び,…], ["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"], ["中国","広島","山口","岡山","島根","鳥取"], ["四国","愛媛","香川","徳島","高知"], ["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"] ]; の部分をそのまま書き出します。このファイルでは、<script></script>はいりません。 この部分を読み込むには、 <script type="text/javascript" src="selectMenu.txt"></script> の様に書きます。 srcのファイル名指定の所に、保存した実際のファイル名を書きます。 位置指定などはhtmlファイルとかと同じで例えばdataフォルダにあれば src="data/selectMenu.txt" とかになります。 <script type="text/javascript" src="selectMenu.txt"></script> の部分を、元のスクリプトの部分の前に置けば スクリプト全体としては、続けて書いてあるのと同じになります。 というわけで、全体としては次のようになります。 <script type="text/javascript" src="selectMenu.txt"></script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]); } } // --> </script> 蛇足 オプションへの設定は、もともとプログラムで設定しているので、上記以外に特別に何かをする必要はないです。 ただ、scriptをoffにしている環境では何も内容が表示されないので、その場合は、デフォルトの値みたいなモノが有った方がいいかと思われるかもしれません。 そういう場合は、とりあえず、普通にoptionをデフォルトとして書いて置いて window.onload=function (){ document.FORM1.MENUA.length=0; for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; とかしておけば、スクリプトが動く場合は置き換えをします。

ayako0401
質問者

補足

さっそくのお返事ありがとうございます! BLUEPIXYさんのアドバイスどおりやりましたがうまくいきませんでした・・ data = [ // [メイン分類,サブ分類並び,…], ["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"], ["中国","広島","山口","岡山","島根","鳥取"], ["四国","愛媛","香川","徳島","高知"], ["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"] ]; をselectMenu.txtのファイル名にして、 <script type="text/javascript" src="selectMenu.txt"></script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]); } } // --> </script> を<head>の中にいれて、src=もパスは間違いなくselectMenu.txtとやったのですが、selectタグの中はなにも表示されませんでした。。。 むずかしいですね。でもたいへん親切な回答をしていただきましてありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

#1の方と似てますが、 data = [ … ]; の部分を外部ファイルにするのは同じで、 並びの最初が、メインのキーになるというのが違う部分です。 あとフォームの部分では、<option>がありません。 野球選手についてよく知らないので、県名でやってます。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>SELECT LIST で項目を絞り込む</title> <script type="text/javascript"> <!-- data = [ // [メイン分類,サブ分類並び,…], ["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"], ["中国","広島","山口","岡山","島根","鳥取"], ["四国","愛媛","香川","徳島","高知"], ["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"] ]; window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html>

ayako0401
質問者

補足

お返事ありがとうございます。とっても丁寧でうれしいです!ありがとうございます。 えーっと、外部ファイルはできれば.txtから読み込ませたいのですけどそれは可能でしょうか? あと、 data = [ // [メイン分類,サブ分類並び,…], ["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"], ["中国","広島","山口","岡山","島根","鳥取"], ["四国","愛媛","香川","徳島","高知"], ["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"] ]; を外部ファイルに書けばいいんですか?その場合ファイル名は任意でつけていいのですか?どうやったら外部ファイルからoptionへ項目を読み込ませるのかがいまいちわかりません。 たとえば、test.htmlに <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>SELECT LIST で項目を絞り込む</title> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i],data[no][i]); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> を書いて、外部ファイルtest.jsに data = [ // [メイン分類,サブ分類並び,…], ["関西","京都","大阪","兵庫","滋賀","三重","奈良","和歌山"], ["中国","広島","山口","岡山","島根","鳥取"], ["四国","愛媛","香川","徳島","高知"], ["九州","福岡","佐賀","長崎","大分","熊本","宮崎","鹿児島"] ]; を書けばいいんですよね?その場合、test.htmlの中に、test.jsの記述を書かないといけないと思うのですが、どこに書けばいいのかがわかりません・・。

  • EUR
  • ベストアンサー率61% (29/47)
回答No.2

>セレクトメニューの項目を外部ファイルから読み込ませたいのですが、(javascriptを知らない人でも項目を変更できるように) に関してですが、質問させてください。 この部分は、サーバー側のことを言っているのでしょうか? つまり、外部ファイル(JSファイル等)から文字列を取得し、セレクトメニューに表示するようなシステムを作り、ホームページの管理人に使ってもらうものですか? (JavaScriptがわからない人=管理人) それとも、クライアント側のことを言っているのでしょうか? つまり、ホームページを見る人が外部ファイルをいじって、セレクトメニューに表示する内容を変更するのですか? (JavaScriptがわからない人=不特定多数のHP閲覧者) ご回答、よろしくお願いいたします。 ※参考 サーバー側のことならばまったくもって問題はないのですが、クライアント側の話となれば、ちょっと厄介です。 CGI等を組まなければなりません。 理由ですが、読み込む外部ファイルと言うものは、サーバーにあるべきもので、クライアントから勝手にアクセスされては困るものです。(HPの内容を勝手に書き換えられては困ります) そこでクライアントが変更したい内容は、いったんサーバー側でデータのチェック等を行い、サーバー側で変更をかけることになります。 この作業はCGI等を用いることになります。 また、クライアント側にあるファイルを読み込むということも絶対に出来ないというわけではないのですが、基本的にセキュリティの関係でJavaScriptからはクライアントのファイルにアクセスできません。 駄文失礼しました。

ayako0401
質問者

補足

お返事ありがとうございます。 えっと、おっしゃるとおり、前者です。外部ファイルをできれば.txtにして、清原、元木、みたいにjavascriptを知らない人でも文字だけ入れれば項目を変更できるというふうにしたいんです。 むずかしいですか?

  • 665
  • ベストアンサー率72% (18/25)
回答No.1

これでどうでしょう。 ・フォームの記述 ----------------------------------- <form name="fm"> <p> 球団:<select name="left" onchange="resetOptions()"> <option>巨人</option> <option>阪神</option> <option>楽天</option> </select> 選手:<select name="right"> <option>-</option> </select> </div> </form> ----------------------------------- ・項目の書き換えスクリプト ----------------------------------- <script type="text/javascript"> <!-- window.onload = resetOptions; function resetOptions(){ var i; var num = document.fm.left.selectedIndex; var len = list[num].length document.fm.right.options.length = len; for (i = 0; i < len; i++) { document.fm.right.options[i].text = list[num][i]; } } //--> </script> ----------------------------------- ・外部ファイル(メニューの項目)の記述例 縦方向は、左の選択肢に対応する項目順に並べてください。 ----------------------------------- var list = [ ["清水", "元木", "ローズ", "小久保"], ["赤星", "鳥谷", "シーツ", "金本"], ["磯部", "沖原", "トレーシー", "山崎"] ]; -----------------------------------

ayako0401
質問者

補足

お返事ありがとうございます。みなさんの親切にはとても感激しています。ありがとうございます。 上の方へも書いたのですが、 var list = [ ["清水", "元木", "ローズ", "小久保"], ["赤星", "鳥谷", "シーツ", "金本"], ["磯部", "沖原", "トレーシー", "山崎"] ]; をtest.jsに書いた場合、 test.htmlには、 <html> <head> <title></title> <script type="text/javascript"> <!-- window.onload = resetOptions; function resetOptions(){ var i; var num = document.fm.left.selectedIndex; var len = list[num].length document.fm.right.options.length = len; for (i = 0; i < len; i++) { document.fm.right.options[i].text = list[num][i]; } } //--> </script> </head> <body> <form name="fm"> <p> 球団:<select name="left" onchange="resetOptions()"> <option>巨人</option> <option>阪神</option> <option>楽天</option> </select> 選手:<select name="right"> <option>-</option> </select> </div> </form> </body> </html> となると思いますが、test.jsの項目をtest.htmlに読み込ませるにはどうしたらいいですか? 初歩的な質問ですいません。。。。

関連するQ&A

  • javaScriptで連動セレクトメニュー

    javaScriptで2つコンボの連動セレクトメニューを作りたいのですが、 下記URLを参考にしようと思っております。 http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、 各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、方法が分かりません。 参考になるサイト、アドバイス等宜しくお願いいたします。

  • ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。

    上のセレクトメニューから県名を選ぶと、下のセレクトメニューの項目が市区町村の項目になるようにセレクトメニューを連動させたいです。 また、そのときのセレクトメニューの項目を外部ファイルから読み込ませたいのですがエラーが出てしまいます。。。 htmlには、 <html> <head> <title>あ</title> <script type="text/javascript"> <!-- // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.MENUA.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.MENUB.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.MENUB.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html> 外部ファイルに data = [ // [メイン分類,サブ分類並び,…], ["北海道", {key:"函館市",value:02_11}, {key:"小樽市",value:02_12}, {key:"旭川市",value:02_13}, {key:"その他市町村",value:02_099}], ["青森", {key:"青森市",value:03_01}, {key:"弘前市",value:03_02}, {key:"八戸市",value:03_03}, {key:"鳥取",value:213}], {key:"その他市町村",value:03_099}], ["岩手県", {key:"盛岡市 ",value:04_01}, {key:"宮古市",value:04_02}, {key:"大船渡市",value:04_03}, {key:"その他市町村",value:04_099}], ["宮城県", {key:"石巻市",value:05_06}, {key:"塩竈市",value:05_07}, {key:"古川市",value:05_08}, {key:"その他市町村",value:05_099}], ]; と書きましたがjavascript初心者でどこに間違いがあるのか解りません・・ すみませんがご教授のほどよろしくお願いいたします。

  • セレクトメニューの選択項目によって、もう1つのセレクトメニューの項目と項目数を変更する

    もう1つのセレクトメニューの項目数が同じタイプのものは、ネット上で見つけられたのですが、項目の数も違うものは見つかりませんでした。 たとえば、1つ目のセレクトメニューでAタイプとCタイプを選択すると、2つ目のセレクトメニューでは5項目から選択でき、Bタイプを選択すると、3項目から選択できるという風にしたいです。ご助言お願いします。

  • セレクトメニューセレクトメニューへのジャンプ

    こんにちは。 セレクトメニューの選択項目に応じて、もう1つのセレクトメニューの内容を変更する方法は大体理解したのですが、 さらにもう一つ、+もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか? 例えば、 セレクトメニュー(1) 選択   ↓ ジャンプ セレクトメニュー(2) 選択   ↓ ジャンプ セレクトメニュー(3) 選択   ↓ ジャンプ セレクトメニュー(4) 選択   ↓ 検索用CGI実行 クリック というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。 参考サンプル等、 どなたか情報をお持ちの方がおりましたら、 よろしくお願いいたします。

  • ラジオボタンとセレクトメニューの連動が複数項目

    前回の質問でフォームでラジオボタンとセレクトメニューの連動をおこなうことができましたが、これを複数項目で選択可能にしたいのですが、コードを教えて頂けませんでしょうか? このような感じです。 用紙の種類 ◎デザインA  ◎選択しない  ◎その他{        }  デザインB  デザインC 色数 ◎デザインA  ◎選択しない  ◎その他{        }  デザインB  デザインC <m(__)m>どうか宜しくお願い致します。

    • ベストアンサー
    • HTML
  • セレクトメニューを4つ使いたいのですが

    セレクトメニューを4つ使いたいのですが 1つだけのセレクトメニューは、探せば見つかるのですが 4つともなると、見つかりません。 イメージとして左フレームに 色選択 柄選択 イメージ選択 価格の選択のセレクトメニューを使いたいのですが・・・ どなたか、回答お願いします。

  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>  メニュー</OPTION> </select> </form></TD>

  • セレクトボックスの内容を連動

    2つのセレクトボックスの内容を連動させて表示を変えたいと思っているんですが、これってJavascriptですか? 一つ目の内容の選択に応じて変更したいです。

  • セレクトメニューの連動 multipleについて

    複数選択の場合の方法がわからずに困っております。 ご教授くださいますようお願い申し上げます。 大項目Aというセレクトメニューがあり、選択項目が40コ程あります。 たとえば、Aのセレクトメニューの項目「靴」が選択されたら、 「靴」に関連する中項目のセレクトメニューがON(選択可能)になるといった感じで設置しております。 30コ程のセレクトメニューがあります。 下記がjavascriptの中身です。 function selectChange() { var selectedNum = document.score.cate1.selectedIndex; if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08 | selectedNum == 09 | selectedNum == 10 | selectedNum == 11) { document.score.co1.disabled = false; document.score.co1.style.backgroundColor='#ffffff'; } else { document.score.co1.disabled = true; document.score.co1.style.backgroundColor='#efefef'; } } function selectChange2() { var selectedNum = document.score.cate1.selectedIndex; if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08) { document.score.so.disabled = false; document.score.so.style.backgroundColor='#FFFFFF'; } else { document.score.so.disabled = true; document.score.so.style.backgroundColor='#EFEFEF'; } } function selectChange3() { var selectedNum = document.score.cate1.selectedIndex; if(selectedNum == 09) { document.score.bl1.disabled = false; document.score.bl1.style.backgroundColor='#FFFFFF'; } else { document.score.bl1.disabled = true; document.score.bl1.style.backgroundColor='#EFEFEF'; } } 今まではこれで問題なく動いていましたが、 今回大項目Aを複数選択できるようにしました。 「靴」と「服」を選択した場合、 靴と服に関連する中項目をONにしたいのですが、先頭の「靴」のみしかONになりません。 いろいろ調べたのですが、さっぱりわからず困っております。 知識が少ないので、ご迷惑をおかけいたしますが宜しくお願いいたします。

  • セレクトメニュー項目によって、表示内容を変えたい。

    セレクトメニューの内容によって、チェックボックスの表示をさせたいのですが、 Javascriptを使って設定できるか教えて下さい。 例えば、セレクトメニューリストが、「選択して下さい」「犬」「ネコ」「鳥」「トラ」とあって、 「犬」を選んだ時に、「オスのみ」「メスのみ」のチェックボックスを表示させるにはどうすればいいでしょうか? (それ以外のリストを選んだ場合は表示させなくしたいのです。) 宜しくお願いします。