ベストアンサー

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

2005/06/24 07:48

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

ayako0401
お礼率11% (36/303)

JavaScript
回答数7
ありがとう数3

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

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/06/29 13:06 回答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">  </script> <script type="text/javascript">  </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>

質問者

補足 2005/06/29 21:40

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

その他の回答 (6)

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/06/28 19:12 回答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 の様になります。上記のサンプルの場合１始まりの順序になっていますが、＃５の補足の様にするには、適宜＋１とかバイアスして下さい。

質問者

補足 2005/06/29 11:46

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

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/06/28 14:49 回答No.5

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

質問者

補足 2005/06/28 15:54

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

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/06/27 18:30 回答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">  </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); }; とかしておけば、スクリプトが動く場合は置き換えをします。

質問者

補足 2005/06/28 00:45

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

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/06/24 20:46 回答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">  </script> </head> <body> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.selectedIndex)"> </select> <br> <select name="MENUB" > </select> </form> </body> </html>

質問者

補足 2005/06/27 17:34

お返事ありがとうございます。とっても丁寧でうれしいです！ありがとうございます。えーっと、外部ファイルはできれば.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">  </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)

2005/06/24 20:21 回答No.2

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

質問者

補足 2005/06/27 17:40

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

665
ベストアンサー率72% (18/25)

2005/06/24 19:48 回答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">  </script> ----------------------------------- ・外部ファイル（メニューの項目）の記述例縦方向は、左の選択肢に対応する項目順に並べてください。 ----------------------------------- var list = [ ["清水", "元木", "ローズ", "小久保"], ["赤星", "鳥谷", "シーツ", "金本"], ["磯部", "沖原", "トレーシー", "山崎"] ]; -----------------------------------

質問者

補足 2005/06/27 17:43

お返事ありがとうございます。みなさんの親切にはとても感激しています。ありがとうございます。上の方へも書いたのですが、 var list = [ ["清水", "元木", "ローズ", "小久保"], ["赤星", "鳥谷", "シーツ", "金本"], ["磯部", "沖原", "トレーシー", "山崎"] ]; をtest.jsに書いた場合、 test.htmlには、 <html> <head> <title></title> <script type="text/javascript">  </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に読み込ませるにはどうしたらいいですか？初歩的な質問ですいません。。。。

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